画像を扱っているのですが、アスペクト比の問題に遭遇しました。
<img src="big_image.jpg" width="900" height="600" alt="" />
見ての通り、height
とwidth
は既に指定されています。画像用のCSSルールを追加しました。
img {
max-width:500px;
}
しかし、big_image.jpg
に対しては、width=500
、height=600
と表示されてしまいます。画像のアスペクト比を保ったままリサイズするにはどうしたらよいでしょうか。
background-sizeプロパティはie>=9のみですが、それでよいのであれば、background-image
のdivを使い、background-size: contain
を設定します。
div.image{
background-image: url("your/url/here");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
これで、divのサイズを好きな大きさに設定すれば、画像のアスペクト比が保たれるだけでなく、divの中で縦横ともに中央に配置されるようになります。ただ、divにはタグ自体にwidth/height属性がないので、CSSでサイズを設定することを忘れないでください。
この方法は、setecsの回答とは異なります。この方法では、画像の領域は一定で、あなたが定義します(divのサイズと画像のアスペクト比に応じて、水平または垂直方向に空のスペースを残します)が、setecsの回答では、(空のスペースのない)スケーリングされた画像の正確なサイズのボックスが得られます。
Edit: MDN background-size documentation]1によると、IE8のbackground-sizeプロパティは、独自のフィルタ宣言を使ってシミュレートすることができます。
Internet Explorer 8はbackground-sizeプロパティをサポートしていませんが、非標準の-ms-filter関数を使用して、その機能の一部をエミュレートすることができます。
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";
height"プロパティを削除します。
<img src="big_image.jpg" width="900" alt=""/>
両方を指定することで、画像のアスペクト比を変更することになります。片方だけを指定するとリサイズされますが、アスペクト比は維持されます。
オプションで、オーバーサイズを制限することができます。
<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>
width,
height,
max-width` を一緒に指定した画像のアスペクト比を保持する標準的な方法はありません。
そのため、画像の読み込み中にページがジャンプするのを防ぐために、width
とheight
を指定するか、max-width
を使用して画像の寸法を指定しないかのどちらかを余儀なくされます。
しかし、スタイルシートに IMG {height: auto; }
のようなルールを追加することで、HTML属性の height
をオーバーライドすることができます。
関連する Firefox bug 392261もご覧ください。