在保持尺寸的同时防止图像拉伸

Question

有没有办法防止图像拉伸，以某种方式裁剪它但保留尺寸..？

img {
  width: 90px;
  height: 120px;
}

<img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt="">

Answer 1

如果您想使图像适合具有固定尺寸的已定义容器，您可以使用object-fit:cover：

＆＃13;

＆＃13;

div {
  height: 120px;
  width: 90px;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

＆＃13;

<div>
  <img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt="">
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

要保持此图像的完全相同的尺寸，您应该只设置两个尺寸中的一个。另一个将自动计算：

＆＃13;

＆＃13;

img {
  width: 90px;
  /*height: 120px;*/
}

＆＃13;

<img src="https://i.pinimg.com/736x/d4/c3/dc/d4c3dc946ae1e087d24def574215e266--image-search-google-search.jpg" alt="">

＆＃13;

＆＃13;

＆＃13;

希望我帮帮忙。

Answer 3

不使用width和height，而是使用max-width和max-height。

img {
  max-width:90px;
  max-height:120px;
}

DEMO