保持纵横比裁剪图片

Question

我有一组带有文本环绕的图像列表，但我接收到的图像大小不同（均大于150px）。我需要将它们全部裁剪为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;
}

- aviss

Answer 1

只要您不需要服务器端裁剪，您可以添加以下CSS代码：

.post img {
    object-fit: cover;
}

请查看object-fit的更多可能值。

- Codemole

---

@aviss，您可以通过点击我的答案旁边的勾选图标来接受我的答案 :D。 - Codemole

你需要或想要实现一个150x100像素比例的图像，并保持比例。这取决于你想要放置图像的容器的大小，这是可能的。较大或较小的容器将会扩展或压缩图像，因此为了保持纵横比，请使用object-fit: .cover { object-fit: cover; } https://css-tricks.com/on-object-fit-and-object-position/ - Zidane

Internet Explorer不支持object-fit 链接。 - Samuel Kirschner

Answer 2

最佳的解决方案是使用JavaScript驱动服务器端进程，并在HTML/CSS中通过程序设置宽度和高度，从而进行缩放（与裁剪相反）。当您需要处理不同高度和宽度的图像时，新比例的宽度必须根据高度或相反计算，有时两者都要计算，而CSS没有提供这种机制。

数学运算非常简单。要满足150像素的水平要求：

- newImageY = 150 / incomingImageX * incomingImageY - newimageX = 150

要满足100像素的垂直要求：

- newImageX = 100 / incomingImageY * incomingImageX - newimageY = 100

然后，如果缩放轴超出了任何现存的最大约束条件，您可以按所需的比例对整个图像（包括X和Y）进行缩小。

对于裁剪（与缩放相反），您需要解决几个问题并决定如何处理。理想情况下，您（或提交者）会决定要显示图像的哪一部分，然后进行智能裁剪。因此，我们需要同时考虑主动代码和关联的用户界面。

例如，可能存在图像无法水平填充但可以垂直填充的情况；如果缩放到150像素水平，则可能存在无法以垂直方式填充的情况等。

总之，如果您想做得好，就必须仔细处理和处理图像。在这里，CSS无法很好地完成工作。

- fyngyrz

---

谢谢！我只是想要一个简单的解决方案。我的所有图像基本上都是相同大小，可以很容易地裁剪。但这是一个非常好的观点。 - aviss

Answer 3

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

background-size: cover;

- Serg Chernata

---

只有在所讨论的图像与页面内容无语义（或SEO！）相关时，才有可能实现这一点。 - observer

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;
}

- Samuel Kirschner