html - 设置图像的默认大小，如果超过或太小则裁剪/放大

Question

假设我有一张 500x1500 大小的图片。我想要的是当我显示它时，我希望默认大小为 500x500，但不拉伸(stretch)它 - 它应该裁剪它并且只显示中心。或者，如果图像是 250x500，我希望它放大到 500x500，而不是笨拙地拉伸(stretch)它。

我的图像元素的 css:

  display: block;
  height: 40%;
  background: no-repeat center;

它还在拉伸(stretch)。

注意:我还标记了 Ionic，因为我正在使用 Ionic，以防万一 Ionic 中有针对它的解决方案。

Answer 1

试试 object-fit: cover

这将剪掉多余部分，保持纵横比，并缩放以适应空间。

文档:https://www.w3schools.com/css/css3_object-fit.asp