如何调整大于 div 容器的图像以完全适合它（自动调整大小、缩小等...）

Question

这是我拥有的代码，我正在 shopify 商店中使用它。

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

这是它的样子：

这是原始图像：

Answer 1

检查此代码：

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

如何调整大于 div 容器的图像以完全适合它（自动调整大小、缩小等...）

How does one resize an image thats larger that the div container to fit perfectly in it(auto resize, zoom out etc...)

html

css

shopify