css裁剪图像保存宽高比

Question

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

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

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

Answer 1

使用height: auto，删除max-width: 600px并离开overflow: hidden。

Answer 2

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