css裁剪图像保存纵横比答案

【问题标题】：css crop image saving aspect ratiocss裁剪图像保存纵横比
【发布时间】：2016-05-15 11:01:08
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

这不会保存纵横比。图像将根据屏幕分辨率进行修剪（不会失真，但仍无法正确回答问题）。
它将保存图像的纵横比（相对于宽度：100% 和高度：100%），它将完全填满容器并切割某些部分图片的大小取决于容器的纵横比。除此之外，这与屏幕分辨率无关 - OP 正在谈论其中包含图像的三列。
background-size: cover 始终会受到仅从一侧（底部或右侧，如果位置是默认的左上角作为起点）切割的图片的影响。这意味着当图片被剪切时，根据定义它不会保持纵横比。至少，我是这么理解的。
感谢您的评论。我认为背景尺寸：封面；会是一个更好的主意！
@Gatto 如果您仍想维护 AR 和完整图像，请使用 background-size: contain;，如果您不介意剪切图像并使用 @ 进行一些调整987654326@，然后background-size: cover就可以了。