レスポンシブで画像表示を確認

レスポンシブで画像がうまく表示されない場合があって苦労しました。

今後苦労しないために、img要素とbackgroundの4パターンで画像の表示を確認しました。

 

パターン1

 imgタグをdivタグ囲む

  max-width: 100%;
  height: auto;

パターン2       ※パターン1と2の違いは青い部分

 imgタグをdivタグで囲む

  width: 100%;
  height: auto;

パターン3

 divタグの中でbackgroundを使用

  background: #C00;
  width: 100%;
  height: 400px;
  background: url(img/400-400.png) no-repeat 0 0/contain;

パターン4      ※パターン3と4の違いは赤い部分

 divタグの中でbackgroundを使用

  background: #C00;
  width: 100%;
  height: 400px;
  background: url(img/400-400.png) no-repeat 0 0/cover;

 

画像はすべて同じ縦400px、横400pxを使用しました。

 

ウィンドウ幅を786pxにした時の表示

f:id:develog:20161202175314p:plain

パターン1

 ウィンドウ幅が画像より大きい400pxを超えた場合でも、画像は400px以上には拡大されません。これは「max-width: 100%」の設定があるからです。

パターン2

 ウィンドウ幅が画像より大きい400pxを超えた場合は、画像はウィンドウ幅に拡大されます。これは「max-width: 100%」ではなく、「width: 100%」の設定があるからです。画像を本来のサイズを超えて表示させると、画質を劣化させて表示させることになりのでやってはいけません。

パターン3

 ウィンドウ幅が画像より大きい400pxを超えた場合でも、画像は400pxを超えて拡大されていません。「width:100%」でも拡大されないのは、heightが400pxのままだからです。横幅を401px以上にすると画像は拡大されます。

一番注意しなければならないのは、widthを大きくして画像サイズを超えると画像はそれ以上拡大されないですが、widthの領域は存在しているということです。

パターン4

 ウィンドウ幅が画像より大きい400pxを超えた場合は、画像はウィンドウ幅に拡大されます。元画像の縦横比を維持したまま拡大されれば、きれいに画像全体が表示されます。縦横比が異なる場合の表示は、エリアをすべて覆うように拡大表示されますが画像全体は表示されません。

画像を本来のサイズを超えて表示させると、画質を劣化させて表示させることになりのでやってはいけません。

 

 

 

ウィンドウ幅を250pxにした時の表示

f:id:develog:20161202175326p:plain

 

パターン1

 ウィンドウ幅を画像より小さい250pxにした場合は、画像は縦横均等に縮小されています。

パターン2

 ウィンドウ幅を画像より小さい250pxにした場合は、画像は縦横均等に縮小されています。

パターン3

 ウィンドウ幅を画像より小さい250pxにした場合は、画像は縦横均等に縮小されています。

横幅を400px以下に縮小したい場合は、横幅または縦幅を400px以下にします。ここでは横幅だけを250pxにました。

一番注意しなければならないのは、縮小しなかったほうの領域は存在しているということです。widthを小さくしてもheightはその時の幅で領域として存在します。この例の場合は、heightは400pxで存在しているため、その下のp要素がその領域分下に表示されています。

パターン4

 ウィンドウ幅を元画像の400pxより小さくすると、画像はウィンドウの右から隠れていきます。

 

 ソースファイル

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>RWD 画像の扱い</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html,body,p {
margin: 0;
padding: 0;
}
img {
vertical-align: bottom;
}
p {
font-size:18px;
font-weight: bold;
margin: 20px 0;
}
/*パターン1
-----------------------------------------------------------*/
#img1 img {
max-width: 100%;
height: auto;
}
/*
img1{width:100%;}としたのと同様の動き
img1 img{width:100%;}とするとパターン2と同様の動き
*/

/*パターン2
-----------------------------------------------------------*/
#img2 img {
width: 100%;
height: auto;
}
/*
widthが200pxまでの動きはパターン1と同じ
widthが200pxを超えると画像200pxを超えて拡大される
*/

/*パターン3
-----------------------------------------------------------*/
#bac1 {
background: #C00;
width: 100%;
height: 400px;
background: url(img/400-400.png) no-repeat 0 0/contain;
}

/*パターン4
-----------------------------------------------------------*/
#bac2 {
background: #C00;
width: 100%;
height: 400px;
background: url(img/400-400.png) no-repeat 0 0/cover;
}
</style>
</head>

<body>
<p>↓パターン1</p>
<div id="img1"><img src="img/400-400.png" alt="#"></div>
<p>↑<br>#img1 img {max-width: 100%;height: auto;}</p>

<p>↓パターン2</p>
<div id="img2"><img src="img/400-400.png" alt="#"></div>
<p>↑<br>#img2 img {width: 100%;height: auto;}</p>

<p>↓パターン3</p>
<div id="bac1"></div>
<p>↑<br>#bac1 {background: #C00;<br>width: 100%;<br>height: 400px;<br>background: url(img/400-400.png) no-repeat 0 0/contain;
}</p>

<p>↓パターン4</p>
<div id="bac2"></div>
<p>↑<br>#bac2 {background: #C00;<br>width: 100%;<br>height: 400px;<br>background: url(img/400-400.png) no-repeat 0 0/cover;
}</p>
</body>
</html>