如何在不裁剪的情况下将不同宽高比的图像制作成相同的宽度和高度？

Question

我有多个 div，其中 class 称为 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 具有不同的纵横比。

Answer 1

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

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

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

Answer 2

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

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

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

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

但这会拉伸图像。这些是您没有裁剪的两个选项。

如何在不裁剪的情况下将不同宽高比的图像制作成相同的宽度和高度？

How to make different aspect ration images into same width and height without getting cropped?

javascript

css

image

aspect-ratio