如何将不同纵横比的图像制作成相同的宽度和高度而不被裁剪？答案

【问题标题】：How to make different aspect ration images into same width and height without getting cropped?如何将不同纵横比的图像制作成相同的宽度和高度而不被裁剪？
【发布时间】：2021-10-26 04:39:12
【问题描述】：

我有多个div，类名为card。我需要我的所有div 具有相同的高度和相同的宽度。我想将图像添加到那些div。我有不同纵横比的不同图像。我也想在 div 中填充整个图像。（我想防止裁剪图像）。因此，如果我可以先将所有图像转换为相同的纵横比，那应该没问题。然后我可以设置.card-img {width=100%}。所有图像的高度应该相同，因为.card 具有相同的宽度并且所有图像具有相同的纵横比。如前所述，我怎样才能完成这项工作？

<div class="card">
 <img class="card-img" src="img-1.jpg" alt="" />
</div>

<div class="card">
 <img class="card-img" src="img-2.jpg" alt="" />
</div>

<div class="card">
 <img class="card-img" src="img-3.jpg" alt="" />
</div>

.card{
 width: 270px
 height: 400px;
}

假设 img-1.jpg、img-2.jpg、img-3.jpg 具有不同的纵横比。

【问题讨论】：

您可以使用背景中的图像并将它们定义为background-size: cover;。查看background-size 规则的可能值，看看它们中的任何一个是否会对您有所帮助。 developer.mozilla.org/en-US/docs/Web/CSS/background-size
@Adriano 当我到达background-size: cover 时遇到的问题是它会裁剪一些图像，因为所有图像的宽高比不同。

标签： javascript css image aspect-ratio

【解决方案1】：

您不能在不裁剪或扭曲图像的情况下强制图像具有与其自然图像不同的纵横比。你说你不想裁剪，所以这是不可能的，你不太可能想要扭曲它（在一个方向或另一个方向拉伸它）。

您可以做的是确保整个图像始终可见是使用contain 而不是cover。

显然，这意味着在某些情况下，卡片的顶部和底部或侧面会有空间，但这是不裁剪要求的必然结果。

【讨论】：

【解决方案2】：

我多次遇到同样的问题。不幸的是，当高度和宽度固定时，我们唯一可用的选项是：

在 img 元素上使用 object-fit: cover。这会导致一些裁剪。
在 img 元素上使用 object-fit: contain。这样可以确保没有裁剪，但会在图像周围添加空白。

如果您可以接受不同的高度和宽度，那么您可以选择使用如下所述的砌体布局： https://masonry.desandro.com/layout.html

【讨论】：

【解决方案3】：

很简单，只需将最大宽度和最大高度设置为 100%，然后让浏览器对其进行排序。

.card {
 width: 270px;
 height: 400px;
 border: 1px solid #333;
}
.card img {
  max-width: 100%;
  max-height: 100%;
}

<div class="card">
 <img class="card-img" src="https://picsum.photos/370/400" alt="" />
</div>

<div class="card">
 <img class="card-img" src="https://picsum.photos/400/100" alt="" />
</div>

<div class="card">
 <img class="card-img" src="https://picsum.photos/400" alt="" />
</div>

这是为了以防你想要图像元素。如果要将图像作为背景，请使用 contain 属性。

更新

如果您希望图像填充单元格，请使用

.card img {
 width: 100%;
 height: 100%;
}

但这会拉伸图像。这是您无需裁剪的两个选项。

【讨论】：