3

HTML コンテンツをかなり狭いウィンドウに表示する「オンライン ヘルプ」システムを作成しています。このウィンドウに画像を表示したいのですが、幅に合わせて拡大縮小します。ただし、画像がページよりも広い場合にのみ、画像を水平方向に縮小したいだけです。つまり、画像を引き伸ばして収まるようにしたくなく、縮小するだけです。

私はもう試した

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

...すべての画像をページ幅に合わせてスケーリングします（つまり、伸縮するだけでなく収縮します）

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

...何もしていないようです。

これを達成する方法はありますか (CSS のみ - jQuery はオプションではないと思います)。

4

3 に答える 3

4

たとえば、特定の画像を縮小するには、画像のクラス名を使用します

.yourclass img{
    max-width:100%;
    height:auto;
}
于 2013-06-14T08:46:37.637 に答える
1

ここでhttp://jsfiddle.net/yeyene/DGNjW/を確認し、結果フレームのサイズを変更して確認してください。

画像サイズ 1920x1080 px を使用しました。また、html img タグ内に幅と高さの値を追加しないでください。この css は比例してサイズ変更されます。(IE7含む)

HTML

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

CSS

img {
    float:left;
    width:100%;
    height:auto;
}
于 2013-06-14T08:42:21.293 に答える