Question

说我有一个500x1500尺寸的图像。我想要的是当我显示它时，我希望默认尺寸为500x500，但不拉伸它-它应该裁剪它并只显示中心。或者，如果图像是250x500，我希望它放大到500x500，而不是笨拙地拉伸它。

我的图片元素的CSS：

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

它还在伸展。

注意：因为我正在使用Ionic，所以我也标记了Ionic，以防万一Ionic中有解决方案。

Answer 1

尝试object-fit: cover

这将消除多余的部分，保留长宽比，并缩放以适应空间。