画像の幅を親要素の枠の幅に合わせて表示するが、枠の幅が画像の元のサイズより広い場合には画像を拡大せずに表示する - CSS
画像の幅を親要素の枠の幅に合わせて表示するが、枠の幅が画像の元のサイズより広い場合には画像を拡大せずに表示する方法を紹介します。
概要
こちらの記事では、imgタグで表示した画像を親要素の幅(ページの幅)に合わせて表示するコードを紹介しました。
紹介した方法では、親要素の幅が画像の元のピクセルサイズより広い場合は、画像が拡大されて表示されるため、にじみやぼやけた表示になり、
表示画質が劣化します。
この記事ではmax-wdithプロパティを利用して、画像の幅を親要素の枠の幅に合わせて表示するが、
枠の幅が画像の元のサイズより広い場合には画像を拡大せずに表示する方法を紹介します。
方針
imgタグのスタイルで
max-width:100%を指定すると、親要素の枠のサイズに合わせて画像を表示でき、画像のピクセル数より幅が広がる場合は、
オリジナルの画像を表示する動作が実装できます。
実装例
コード
以下のHTMLとCSSを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="image-responsive-width-02.css" />
</head>
<body>
<h2>コンテンツ幅に合わせてイメージの幅を変化させる (画像のピクセルサイズよりは大きくしない)</h2>
<div class="ContentFrame">
<img class="ContentImage" src="image-800.png"/>
</div>
</body>
</html>
.ContentFrame {
border: 2px solid #0094ff;
margin: 4rem auto 4rem auto;
padding:0.5rem 0.5rem 0.5rem 0.5rem;
}
.ContentImage {
max-width:100%;
}
解説
divで枠を表現します。クラスに
ContentFrameを設定します。
<div class="ContentFrame">
</div>
CSSで
ContentFrameクラスに枠線を表示します。また、マージンとパディングを設定しています。
.ContentFrame {
border: 2px solid #0094ff;
margin: 4rem auto 4rem auto;
padding:0.5rem 0.5rem 0.5rem 0.5rem;
}
imgタグで画像を表示します。クラスに
ContentImageを設定しています。
<img class="ContentImage" src="image-800.png"/>
CSSで
ContentImageクラスには
max-width:100%;を指定します。この設定で親要素の幅に合わせて画像が表示され、
画像が元のサイズより大きく表示される場合はオリジナルの画像サイズで表示する動作となります。
.ContentImage {
max-width:100%;
}
表示結果
上記のHTMLページをWebブラウザで表示します。下図のページが表示されます。
ウィンドウの幅に合わせて枠のサイズが調整され、枠内に収まる幅で画像が表示されています。
ウィンドウの幅を広げると枠の幅が広がり画像の幅も広がります。
更にウィンドウの幅を広げ、画像のオリジナルの横幅よりも親要素の横幅が広くなった場合、
画像は拡大して表示されず、元の画像のサイズで表示される動作になります。
画像の幅を親要素の枠の幅に合わせて表示するが、枠の幅が画像の元のサイズより広い場合には
画像を拡大せずに表示することができました。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
