Fill a Div with an Image Respecting Aspect Ratio

Fill a div with an image respecting aspect ratio

Consider using the CSS object-fit property.

5.5. Sizing Objects: the object-fit
property

The object-fit property specifies how the contents of a replaced
element should be fitted to the box established by its used height and
width.

Here are two of the values:

• cover

  The replaced content is sized to maintain its aspect ratio while
  filling the element's entire content box.

• contain

  The replaced content is sized to maintain its aspect ratio while
  fitting within the element's content box.

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:

• Neat trick for CSS object-fit fallback on Edge (and other browsers)
• fitie - An object-fit polyfill for Internet Explorer
• object-fit-images - Adds support for object-fit on IE9, IE10, IE11, Edge and other old browsers
• Polyfill (mostly IE) for CSS object-fit property to fill-in/fit-in images into containers.

---

More information

• MDN object-fit property
• CSS-Tricks object-fit property
• object-fit browser support @ caniuse.com

CSS force image resize and keep aspect ratio

img {  display: block;  max-width:230px;  max-height:95px;  width: auto;  height: auto;}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Maintain aspect ratio of div but fill screen width and height in CSS?

There is now a new CSS property specified to address this: object-fit.

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

The feature is widely supported by now (http://caniuse.com/#feat=object-fit).

Maintain the aspect ratio of a div with CSS

Just create a wrapper <div> with a percentage value for padding-bottom, like this:

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div class="demoWrapper">
  <div></div>
</div>

How to keep aspect ratio of a background-image?

Use background-size: cover; to cover the entire element, while maintaining the aspect ratio:

.background-1,.background-2,.background-3 {  /* Set the background image, size, and position. */  background-image: url('//via.placeholder.com/350x150');  background-size: cover;  background-position: center;
  /* Or, use the background shortcut. */  background: url('//via.placeholder.com/350x150') center/cover;
  margin: 20px;  border: 1px solid rgba(0, 0, 0, 0.3);}
.background-1 {  width: 300px;  height: 200px;}
.background-2 {  width: 200px;  height: 50px;}
.background-3 {  width: 100px;  height: 200px;}

<div class="background-1"></div><div class="background-2"></div><div class="background-3"></div>

---

Related Topics