Is it possible to fill a div with an image such that at least one image dimension is 100% and the other dimension is either wider or equal size as the div, whilst respecting the image's aspect ratio.
An example could use the classes wide
and tall
like this:
<div class="tall">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Klaproos.jpg/266px-Klaproos.jpg"/>
</div>
<div class="wide">
<img src="https://groenevrijdag.files.wordpress.com/2013/11/klaproos2.jpg"/>
</div>
div {
width: 400px; height: 400px;
display: block;
overflow: hidden;
border-radius: 50%;
display: inline-block;
}
div.tall img { width: 100%; margin-top: -50%; }
div.wide img { height: 100%; margin-left: -50%; }
https://jsfiddle.net/7tuod6vu/
I'm looking for a pure HTML+CSS solution which works for responsive rectangular (not necessarily square) divs. For this particular reason, Javascript would be a pain as one would need to determine whether the width or height should be 100% on every resize. Server side wouldn't even be an option.
Does a pure HTML+CSS solution exist for this?
EDIT Should have been clear about this from the beginning, sorry about that 🙁 I'm not looking for the background-image solution, since it does not allow base64-inhtml representation of images. Moreover, I think background-image's are semantically different from <img>
s.
Best Answer
Consider using the CSS
object-fit
property.So, with
cover
the image retains its aspect ratio and covers all available space. Of course, this means that much of an image may be cropped off-screen.With
contain
the aspect ratio is also maintained, but the image scales to fit within the box. This means that an image may have whitespace on the left and right, or top and bottom.Browser Compatibility
As of this writing,
object-fit
is not supported by Internet Explorer. For a workaround see:object-fit
fallback on Edge (and other browsers)object-fit
polyfill for Internet Explorerobject-fit
on IE9, IE10, IE11, Edge and other old browsersobject-fit
property to fill-in/fit-in images into containers.More information
object-fit
propertyobject-fit
propertyobject-fit
browser support @ caniuse.com