使用CSS按比例缩放图片并进行中心裁剪

Question

3

我希望创建一个像手机相册一样的图库。每个图片应该在主容器内以正方形盒子的形式呈现。

图片不应该被拉伸，而是应该被裁剪或最大限度地剪切。现在，我使用以下代码按比例拉伸图像：

img {
  max-width : 150px;
  max-height : 150px;
}

它给我每个图像的缩小缩略图。但是，我希望将所有内容放在正方形框中，并剪裁或裁剪图像的中心部分。

这里是我想要的示例：

- Mohideen bin Mohammed

2

使用JS polyfill为旧浏览器提供object-fit支持，或者使用background-size... - CBroe

谢谢@CBroe，object fit cover正是我想要的。 - Mohideen bin Mohammed

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mohideen bin Mohammed · Accepted Answer

这是我实现它的解决方案...它保持了宽高比，并将图像带到中心，就像我想要的一样...

.scale-image {
  object-fit: cover;
  width: 150px;
  height: 150px;
}