javascript - 自动调整图像大小以填充 div

Question

我在一个 div 中有一个图像，我需要它尽可能大。我试过使用 width: 100% 和 height: 100% 并且同样适用于 max-width 和 max-height 但这没有用。这些不起作用的原因是因为我的图像大小不一，有些高，有些宽。有没有办法让图像调整大小，使其尽可能宽而不用高度扩展 div？

基本上:width:100% 除非这使得 height 大于 100%，在这种情况下我想使用 height:100% .

Answer 1

您可能想为图像使用 object-fit: cover; css 规则。

这几乎等同于 background-size: cover if you are working with backgrounds。

请注意，该规则将根据比例“裁剪”图像的某些部分。

更新:如果你不想从图像中裁剪任何东西，你可以只使用 height:inherit; 并以某种方式定位你的图像以适应所有样式(可能是中心)

这将保持比例并尽可能扩大宽度。