Menu
Can someone take a look at the following fiddle: http://jsfiddle.net/R4bCy/1/
I thought that a div should adjust it's height in order to accommodate it's elements, unless the elements are positioned absolutely.
Why does the div not expand to the full height of the image?
I need to the image to be aligned to the right. The only ways that I know how to do this is align='right', position:absolute; right: 0; and float:right, all of which make the containing div not adjust it's height to the image height.
948
To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.
The .A simple utility class, . full-width , will break the image out of it's parent container using some negative margins, relative positioning, and the viewport width ( vw ) unit of measure. Add it to your image, and the CSS handles the rest.
.intro { margin: 10px; outline: 1px solid #CCC; background: #A00; color: #FFF; height:auto; overflow:auto; } .img{ float:right; height:auto; } <div class="intro"> <div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg" style="margin: 10px 10px; "/></div> <p>Sorry, but the page you requested could not be found.</p> </div> DEMO
160
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
