Ad

How Does One Resize An Image Thats Larger That The Div Container To Fit Perfectly In It(auto Resize, Zoom Out Etc...)

- 1 answer

This is the code i have and im using it on a shopify store.

<div style="width:100%; height:404px;">
  <img style='height: 100%; width: 100%; object-fit: contain; background-image: url(https://cdn.shopify.com/s/files/1/2233/7153/files/Grade_photo_shoot__0056.jpg?13831580932505769974);' />
</div>

Here is what it looks like:

enter image description here

and this is the original image:

enter image description here

Ad

Answer

Check this code:

#myCanvas {
  border: 1px solid red;
}

.image {
  background-image: url('https://cdn.shopify.com/s/files/1/2233/7153/files/Grade_photo_shoot__0056.jpg?13831580932505769974');
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}
<div style="width:100%; height:404px;">
  <div class="image">
  </div>
</div>

Ad
source: stackoverflow.com
Ad