Large image inside small div with no cropping or change in aspect ratio

Question

I have a div that is 30% wide and contains a background image. The image itself is about 500px x 300px. When the browser is wide enough that the 30% wide div is about 500px the whole image displays nicely with no cropping or stretching. But when the viewport is narrow and that div shrinks to say 300px the 500px image is being cropped. Is there a way to take a large image and force it into a smaller container with no cropping and no loss of aspect ratio? If not, what is the proper way to keep an image filling up a div with no cropping or loss of aspect ratio between media query breakpoints where i switch the image?

Are you okay with the image not filling up the parent element 100%? As that seems to be the only option with the given requirements. — hungerstar, Jun 22 '17 at 18:01
set the width to 100% in the style attribute of the img element - `` — Jay Buckman, Jun 22 '17 at 18:03
I actually want the large image to fill up the smaller div that contains it 100%. I just don't want the image to be cutoff/cropped. It's an image of a graph and it will look weird if only 1/2 the image is shown because the div is too small to hold the whole thing. — johnsontroye, Jun 22 '17 at 18:04
@johnsontroye you really should have a [**Minimal, Complete and Verifiable Example**](http://stackoverflow.com/help/mcve). This will make things a lot easier to understand and provide an answer to. Currently it sounds like you need to use `background-size: contain;`. — hungerstar, Jun 22 '17 at 18:09

score 2 · Accepted Answer · edited Jun 22 '17 at 18:09

2

This has been answered already if you are using an img element: Is there an equivalent to background-size: cover and contain for image elements?

But if you want to stick to CSS and are using a background-image:url('...'); just set the background-size to background-size: contain;.

edited Jun 22 '17 at 18:09

hungerstar

21,206
6
50
59

answered Jun 22 '17 at 18:03

Christian4423

1,746
2
15
25

I am using a div with background-image not an – johnsontroye Jun 22 '17 at 18:07
@johnsontroye did you not read the answer? [**This JSFiddle**](https://jsfiddle.net/qrnb4htq/) is an example of what **Christian4423** is instructing you to do. [**This JSFiddle**](https://jsfiddle.net/betvdce2/) is an example of what others are suggesting to do with ``. Which achieves the same result. You can resize the viewports of the fiddles by dragging the vertical divider line. – hungerstar Jun 22 '17 at 18:15

score 0 · Answer 2 · answered Jun 22 '17 at 18:27

There maybe much better ways of doing this but this is what I usually start with.

A parent div with fixed dimensions. I then add the image as the background of a child div inside that parent div.

The images always adjust and fit inside the parent div.

.my-image-parent {
  display: inline-block;
  width: 300px;
  height: 300px;
  background: #131418; /* for demo only */
  line-height: 300px; /* should match your div height */
  text-align: center;
  font-size: 0;
}


/* demonstration backgrounds */
.bg1 {background: url(https://unsplash.it/300/300);}
.bg2 {background: url(https://unsplash.it/800/800);}
.bg3 {background: url(https://unsplash.it/1920/1080);}
.bg4 {background: url(https://unsplash.it/760/1240);}

.my-image {
  width: auto;
  height: 100%;
  vertical-align: middle;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

<div class="my-image-parent">
  <div class="my-image bg1"></div>
</div>

<div class="my-image-parent">
  <div class="my-image bg2"></div>
</div>

<div class="my-image-parent">
  <div class="my-image bg3"></div>
</div>

<div class="my-image-parent">
  <div class="my-image bg4"></div>
</div>

Large image inside small div with no cropping or change in aspect ratio

2 Answers2