css - DIV wrapping around a IMG with 100% height -
i have div , img both set 100% height , widths auto.
but want div resize/wrap width of img (and maintain aspect ratio) while resizing height of browser. doesn't seem so. in browser. knows why behavior occurs?
div { height:100%; background:red; display:inline-block; padding:20px; box-sizing:border-box; } img { height:100%; display:block; } <div> <img src="http://upload.wikimedia.org/wikipedia/commons/e/e9/official_portrait_of_barack_obama.jpg"/> </div>
you can try out here. div has red background. http://jsfiddle.net/jjktf/3/
thanks!
hey hope see mentioned below css
div { background: none repeat scroll 0 0 red; display: inline-block; height: 100%; max-width: 100%; padding: 20px; } img { display: block; height: auto; max-width: 100%; }
its working per requirement.......
Comments
Post a Comment