如何调整比div容器更大的图像以完全适合它(自动调整大小,缩小等...)

时间:2018-04-09 13:15:36

标签: html css shopify

这是我的代码,我在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>

这是它的样子:

enter image description here

这是原始图片:

enter image description here

1 个答案:

答案 0 :(得分:2)

检查此代码:

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