How to keep aspect ratio of a background-image?

Question

I've tried to look at other answers but no help. My background is dynamic so the size of images will change, so I need to keep aspect ratio so the whole image is seen. here's my CSS:

.image_submit_div {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 20px 50px;
    width: 55%;
    height: 320px;
    cursor: pointer;
    background: url('something.jpg'); /* this changes */
    margin: 0 0 25px;

}

html

<label for="id_image" class="image_submit_div">

At the moment depending on the image, sometimes alot of it is cut off. I want the image to be downsized so it can be seen fully. Any idea?

I tried what they said (background-size: 200px 50px;) or background-size: 100% 100%); and it still doesn't work - still cuts off most of the picture — Zorgan, Jan 10 '17 at 01:45
For anyone still trying to figure this out, I came up with a solid solution. Have a div with an img tag inside, set the img src to your image url but set 'visibility' to hidden. Then set the background image url of the containing div to your image url as well and background size to contain. The hidden image keeps the div to the ratio of your image and background image contain fills the div perfectly. — Michael Brown, Aug 12 '20 at 15:14
If you have multiple background images, e.g. a gradient plus an image, you can define just one size and set the other to auto: ``` background-size: 40% auto, 100% 100%; ``` — Johannes, Apr 12 '22 at 21:45

Jacob G · Accepted Answer · 2019-04-22T18:04:01.870

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>

If you want to display the entire image, while maintaining the aspect ratio, use background-size: contain; instead:

.background-1,
.background-2,
.background-3 {
  /* Set the background image, size, position, repeat, and color. */
  background-image: url('//via.placeholder.com/350x150');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fbfbfb;

  /* Or, use the background shortcut. */
  background: #fbfbfb url('//via.placeholder.com/350x150') no-repeat center/contain;

  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>

This works perfectly, thanks! Regardless of the size it now shows the full image. — Zorgan, Jan 10 '17 at 01:49
FYI, `cover` may hide part of the image. `contain` will show the entire image in the space provided. — Cully, Aug 19 '20 at 22:16
@simPod according to the [W3 spec](https://drafts.csswg.org/css-backgrounds-3/#valdef-background-size-cover), yes. — Jacob G, Apr 27 '21 at 15:14
@JacobGray interesting, it indeed says that. It's just the _Run code snippet_ shows skewed background images here. And [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#cover) says it stretches the image if necessary — simPod, Apr 27 '21 at 19:32

score 17 · Answer 2 · answered Jan 10 '17 at 01:46

Use background-size:contain; if you want to see the whole image and stretch it to the full width or height (depends on the aspect ratio of the image) of the div.

But if you want to cover the whole div with the background-image and don't mind the image getting cropped then use background-size:cover; instead.

.image_submit_div {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 20px 50px;
    width: 55%;
    height: 320px;
    cursor: pointer;
    background: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg'); /* this changes */
    margin: 0 0 25px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}

<label for="id_image" class="image_submit_div">

How to keep aspect ratio of a background-image?

2 Answers2

Linked

Related