How to keep aspect ratio of a background-image? [duplicate]

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?

Answer 1

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>

Answer 2

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">