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

Question

我有多个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 具有不同的纵横比。

标签： javascriptcssimageaspect-ratio

Answer 1

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

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

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