如何在没有 javascript 的情况下使用最大高度和宽度来灵活调整 css 图像大小，同时保持图像纵横比？

Posted 2023-02-23

【中文标题】如何在没有 javascript 的情况下使用最大高度和宽度来灵活调整 css 图像大小，同时保持图像纵横比？

【英文标题】：How can I have flexible css image sizing with max height and width while preserving image aspect ratio, without javascript?

【发布时间】：2012-01-23 04:32:54

【问题描述】：

我真的以为这会在堆栈溢出的其他地方出现，但我搜索了很长时间都没有结果。如果我错过了，请原谅我。

我有一组图像需要尽可能大（宽度：容器元素的 100%），只要容器不会因为容器宽度而变得太宽或图像太高。需要保留长宽比。

我认为我可以这样做

img  width: 100%; height: auto; max-width: 500px; max-height: 250px; 

这个想法是，如果图像达到给定宽度和纵横比的最大宽度或最大高度，它将不再增长。实际上，这会导致图像宽度尽可能宽，但当它太高时会破坏纵横比（将图像压缩到最大高度），而不是阻止图像变宽。

有没有更好的方法来解决这个问题？如果可能的话，我想避免使用 javascript。我的测试在 Firefox 9 中。

【问题讨论】：

这就是我担心的；谢谢，搅拌机

【参考方案1】：

有点旧，但使用顶部或底部填充将保持您的纵横比。除以高度/宽度并将该百分比应用于填充顶部或底部。有时它会变得很棘手，但它确实有效。

这是一篇关于它的好文章： http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

【参考方案2】：

您可以使用媒体查询来创建固定图像大小的阶梯，然后像这样：

@media screen and (min-width: 701px) and (max-width: 900px) 
    img 
        width:  800px;
        height: auto;
    


@media screen and (min-width: 901px) and (max-width: 1100px) 
    img 
        width:  1000px;
        height: auto;
    

不是很漂亮，但很有效。

【讨论】：

谢谢，这不是我所需要的，但我想这看起来最接近我在这个问题上得到的答案。