css裁剪图像保存纵横比

Posted 2023-02-25

【中文标题】css裁剪图像保存纵横比

【英文标题】：css crop image saving aspect ratio

【发布时间】：2016-05-15 11:01:08

【问题描述】：

我有 3 列和 3 张具有不同纵横比和分辨率的图像。 我设置宽度：100%；我想裁剪每个图像的底部，以便每个图像的高度：600px；

我试试这个，但它会导致 img 的压缩或拉伸

img
    width: 100%;
    max-height: 600px;
    overflow: hidden;

【问题讨论】：

请添加一个带有示例 html 代码的 jsFiddle，以便我们更好地了解您的情况。看来这个问题是模棱两可的.. :)

【参考方案1】：

使用height: auto，删除max-width: 600px，留下overflow: hidden。

【讨论】：

那么在这种特殊情况下，您的图像高度可能低于 600 像素。您不想拉伸（= 扭曲）它们，是吗？

【参考方案2】：

作为替代解决方案，您可以将图像定义为其容器的背景图像（即没有<img> 标签）并在它们上使用background-size: cover; 和background-position: center。

【讨论】：

这不会保存纵横比。图像将根据屏幕分辨率进行修剪（不会失真，但仍无法正确回答问题）。

它将保存图像的纵横比（相对于宽度：100% 和高度：100%），它将完全填满容器并切割某些部分图片的大小取决于容器的纵横比。除此之外，这与屏幕分辨率无关 - OP 正在谈论其中包含图像的三列。

background-size: cover 始终会受到仅从一侧（底部或右侧，如果位置是默认的左上角作为起点）切割的图片的影响。这意味着当图片被剪切时，根据定义它不会保持纵横比。至少，我是这么理解的。

感谢您的评论。我认为背景尺寸：封面；会是一个更好的主意！

@Gatto 如果您仍想维护 AR 和 完整 图像，请使用 background-size: contain;，如果您不介意剪切图像并使用 @ 进行一些调整987654326@，然后background-size: cover就可以了。