CSS 和图像大小

Posted 2023-03-06

【中文标题】CSS 和图像大小

【英文标题】：CSS and image size

【发布时间】：2013-08-20 09:03:09

【问题描述】：

我想要一个 CSS 类和/或解决方案，其中图像的宽度为 100%（高度为自动），但其自身大小最大。无论如何要实现这一点，还是我需要逐个图像指定最大宽度？

【参考方案1】：

如果你设置：

width: 100%;
height: auto;

图像将与其容器一样大。宽度和高度之间的比例将保持不变。

如果图像的宽度小于容器的宽度，那么它将被缩放直到适合可用空间。在这种情况下，您可能需要使用：

max-width: 100%;
height: auto;

【讨论】：

max-width 解决方案对我不起作用。调整窗口大小时，图像不会向下调整。 （并且 width 解决方案没有产生预期的效果，因为我不希望小图像向上调整/缩放）

对不起，我不能同意你的看法。打开下面的提琴手jsfiddle.net/krasimir/VVNDX/1 并向右收缩面板。您将看到图像已调整大小并填充了可用空间。第二张图完全一样。那里的容器宽度比图像低， max-width: 100% 也解决了这个问题。换句话说，max-width: 100% 告诉浏览器图像的最大宽度将始终等于容器的宽度。

我让它在我网站的其他地方工作，所以我假设它在我最初测试它的地方不起作用的原因有其他原因。谢谢你的协助。我会及时让您的解决方案在我的网站上运行 :)

其实又看了一遍。它适用于 Chrome、Safari 但不适用于 IE、FireFox 和 Opera。无论如何，答案已被接受，但我稍后可能会带着更精确的问题回来。我需要弄清楚是否是导致问题的原因。

【参考方案2】：

应该这样做：

    img 
        max-width: 100%;
        height: auto;
    

如果窗口大于图像，图像不会被缩放。如果窗口小于图像，则图像应缩放。我注意到你说你对克拉西米尔的回答没有评论。您可能想检查一下是否有其他 CSS 可能会改变这种行为。

【讨论】：

您是否阅读了上一个答案？这与 9 小时前提出的解决方案相同

我知道，对此我很抱歉。我想评论检查其他 CSS，但我没有足够的声誉来评论！我认为这可能是导致您的图像无法缩放的容器问题。

嗨。我认为你们都是正确的，因为我已经确认解决方案可以在我的网站上的其他地方工作，所以我最初测试提出的解决方案的地方不知何故使该解决方案不起作用。 （现在想弄清楚。）