Question

我有一个包含文字的图像列表，但我收到的图像有不同的尺寸（全部大于150像素）。我需要将它们全部裁剪为150x100px但保持正确的宽高比。有人可以建议解决这个问题的最佳方法吗？谢谢！

HTML：

<ul>        
    <div class="post" id="post">
    <div>
        <li>
        <img class="TextWrap" src="{{ picture }}">
        <a href="{{ link }}">{{ message }}</a><p>
        {{ time }}
        </li>   
    </div>
</ul>

CSS：

.post {
    width: 500px;
    margin-top: 15px;
    float: left;
}

.post img {
    width: 150px;
    height: 100px;
    margin-bottom: 15px;
    margin-right: 20px;
}

.TextWrap {
    float: left;
}

Answer 1

只要您不想要服务器端裁剪，就可以添加以下css：

.post img {
    object-fit: cover;
}

请检查object-fit

的更多可能值

Answer 2

作为Ray的答案的替代方案，您可以将图像设置为背景并使用：

background-size: cover;

Answer 3

缩放的最佳答案（与裁剪相反）是Javascript驱动服务器端进程，然后以编程方式设置HTML / CSS中的宽度和高度。当你有不同的高度和宽度时，必须相对于高度计算新缩放的宽度，反之亦然，有时两者都是，而CSS也没有为此提供机制。

数学非常简单。要符合150水平要求：

newImageY = 150 / incomingImageX * incomingImageY
newimageX = 150

匹配100垂直要求：

newImageX = 100 / incomingImageY * incomingImageX
newimageY = 100

然后，如果缩放的轴对于任何剩余的最大约束而言太大，则将整个图像（X和Y）缩小所需的量。

对于裁剪（与缩放相反），您需要面对几个需要决定如何处理的问题。理想情况下，您（或提交者）将决定您要显示的图像的哪个部分，然后智能裁剪。因此，我们正在谈论活动代码和相关的UI。

例如，有些情况下图像不会水平填充，但会垂直填充;如果水平缩放到150，它不会垂直填充的情况

底线几乎是＆＃34;你必须检查和处理图像＆＃34;如果你想做得好CSS并不仅仅是在这里做得很好。

Answer 4

如果没有指定高度和宽度，或者只有其中一个，图片将保持其预期的比例。

max-width和max-height仍可用于限制尺寸

.post {
    width: 500px;
    margin-top: 15px;
    float: left;
}

.post img {
    max-width: 150px;
    max-height: 100px;
    margin-bottom: 15px;
    margin-right: 20px;
}

.TextWrap {
    float: left;
}

裁剪图像保持纵横比

4 个答案: