时间戳

首页 > 解决方案 > CSS调整多个图像的大小，使它们具有自定义宽度，但纵横比相同

css - CSS调整多个图像的大小，使它们具有自定义宽度，但纵横比相同

问题描述

如果我有多个具有不同纵横比的图像，但希望它们都被调整大小以使宽度相等，但改变高度以保持原始纵横比，我可以用 JS 和数学来做到这一点，但是否有短解决方案？

标签： css

解决方案

是的，只需设置width使用 CSS 而不是设置height，高度将在保持纵横比的同时为您调整。

img { width: 100px }
<img src=https://i.stack.imgur.com/w5PGK.jpg">

但请注意，如果您担心高度可能会变得非常大，您也可以使用max-height来限制它。但这样做可能会扭曲图像：

img { width: 100px; max-height: 160px }
<img src=https://i.stack.imgur.com/w5PGK.jpg">

一种解决方案是在图像上设置一个max-width和max-height：

img { max-width: 100px; max-height: 120px }
<img src=https://i.stack.imgur.com/w5PGK.jpg">

并且图像将包含在具有适当纵横比的框中。

还有一些技巧，比如创建一个固定大小的查看框，并设置overflow: hidden将显示区域限制为框的大小，同时为图像设置一个固定的宽度：

.image-box { width: 100px; height: 100px; overflow: hidden }
.image-box img { width: 100px }
<div class="image-box">
  <img src=https://i.stack.imgur.com/w5PGK.jpg">
</div>

推荐阅读