css - 仅当图像比页面宽时才使用 CSS 缩放图像

Question

我正在组装一个“在线帮助”系统，它将在一个相当窄的窗口中显示 HTML 内容。我想在此窗口中显示图像，但将它们缩放以适合宽度。但是，如果图像比页面宽，我只想水平缩小图像 - 换句话说，我不想拉伸图像以适应，只是缩小它。

我试过了

.img {width: 100%; height: auto;} 

...它只是将每个图像缩放到页面宽度（即拉伸和收缩）

.img {max-width: 100%; height: auto}

...这似乎没有做任何事情。

是否有任何（仅 CSS - 恐怕 jQuery 不是一种选择）方法来实现这一点？

Answer 1

例如，缩小一些特定的图像使用图像的类名

.yourclass img{
    max-width:100%;
    height:auto;
}

Answer 2

检查这里http://jsfiddle.net/yeyene/DGNjW/，调整结果框大小并查看。

我使用的图像尺寸为 1920x1080 像素。并且不要在 html img 标签内添加宽度和高度值。这个 css 将按比例调整大小。（包括 IE 7）

HTML

<img src="http://www.wallhoster.com/wp-content/uploads/Best-Nature-Full-HD-Wallpapers31.jpg">

CSS

img {
    float:left;
    width:100%;
    height:auto;
}

Answer 3

您的 CSS 属性应该可以工作，但您的 CSS 选择器可能有错误，请注意，这将选择具有该类.img的每个 DOM 元素；img不会选择“img”标签。顺便说一句，我正在寻找一个解决方案，发现以下看起来足以完成工作。

img { max-width: 100%; }

选择器img没有点的地方。