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

Question

我正在组织一个＆＃34;在线帮助＆＃34;系统，它将在一个相当狭窄的窗口中显示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将选择img类的每个DOM元素；没有选择“ img”标签。顺便说一下，我在寻找解决方案时，发现以下内容足以完成工作。

img { max-width: 100%; }

选择器为img，不带点。