35

レスポンシブ デザインについて読んでいて、次の問題に気付きました。

「Fluid Images」に関する推奨事項の 1 つは、次のような CSS ルールを使用することです。

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

しかし、適切な効果を得るためには、img タグのインライン画像の幅と高さの属性を削除する必要があります。

HTML でイメージの幅と高さを指定することが重要です か?

ありがとう

4

3 に答える 3

17

（他の回答で述べたように）widthandheight属性は流動的な画像に干渉しませんが、流動的な画像はまだ読み込まれていない画像に干渉し、Chrome以外のブラウザで適切なスペースを占有します。これには回避策があります。この記事で説明されているように、画像を固有の比率でdivにラップします：http：//www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

.img-wrapper {
    max-width: 200px; /* The actual width of the image */
}

.img-wrapper2 {
    height: 0;
    padding-bottom: 100%; /* The image's height divided by its width */
}

残念ながら、これにはmax-width効果を正しく得るために、2つのラッパーdivが必要です。widthただし、 andheight属性が提供するのと同じ利点を見かけの読み込み速度に提供します。.img-wrapper overflow: hidden古いIEの病理学的な振る舞いの一部を隠すために与えることができます。

jsFiddle： http: //jsfiddle.net/7j3db/32/

于 2012-06-19T22:07:25.613 に答える
11

画像の幅と高さの属性を削除する必要はありません。

jsFiddle: http://jsfiddle.net/7j3db/

Chrome、Firefox、Opera、IE9、および IE7 をエミュレートする IE9 でテスト済み。あなたが言及した正確なCSSルールで、それらのすべてでうまくいくようです。

編集: ロードできなかった画像でテスト済み: http://jsfiddle.net/7j3db/1/

これは、Chrome と IE (IE7 でさえも) では適切な効果がありましたが、Firefox や Opera では効果がありませんでした。ただし、Firefox と Opera でも、width 属性と height 属性を省略した場合よりも効果がありました (height 属性には効果がありませんが、width 属性には効果があったためです)。

代替テキストを使用したさらなるテスト ( http://jsfiddle.net/7j3db/2/ ): IE7 で完全に処理されましたが、IE9 が Opera に加わり、IE8 は非常に奇妙なことを行います (画像の高さは代替テキストの長さに依存します。代替テキストが多いほど、スペースが少なくなります)。Chrome は代替テキストを完全に無視しているようです。Opera と FF は代替テキストを表示しますが、それ以外は基本的に以前と同じ動作をします。ただし、幅と高さの属性は、これらの代替テキストの問題のいずれにも関与していないようです (IE8 を除いて、ある程度)。

于 2012-06-01T13:39:03.783 に答える
3

追加することでこれを達成できます

html, body{
max-width:100%;
width:100%;
}

また、これらのプロパティをimgタグの親divに配置します。

于 2012-09-29T13:36:18.360 に答える