読者です 読者をやめる 読者になる 読者になる

img画像のwidth指定について<レスポンシブ/float>

HTML+CSS

imgタグのwidth指定の方法によって見える結果がかなり違ってくるので注意。

width/max-widthをimgに指定する場合、imgを囲うdivに指定する場合のそれぞれの

動きの変化を検証してみる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>floatの検証</title>
<style>
html, body, p {
  margin: 0;
  padding: 0;
  line-height:1.0;
}
img {
 border:none;
  vertical-align: center;
}    
    
/*①-----------------*/
p.a {
  float: left;
  max-width: 50%;
}
/*②-----------------*/
p.b {
  float: left;
  width: 50%;
}
/*③-----------------*/
p.aa img{
  float: left;
  max-width: 50%;
}
/*④-----------------*/
p.bb img {
  float: left;
  width: 50%;
}
</style>
</head>
<body>
<p class="a"><img src="img/01.png"></p>
<p class="a"><img src="img/02.png"></p>
    
<p class="b"><img src="img/01.png"></p>
<p class="b"><img src="img/02.png"></p>
    
<p class="aa"><img src="img/01.png"></p>
<p class="aa"><img src="img/02.png"></p>
    
<p class="bb"><img src="img/01.png"></p>
<p class="bb"><img src="img/02.png"></p>
</body>
</html>

pタグでimg(400X400px画像)を囲った場合、

①pにmax-width:50%;

  PC…400X400px画像が横に2つ並ぶ
  SP…widthがウィンドウサイズの50%  
  heightは400pxそのまま
  画像は縮小されず見切れる

②pにwidth:50%;

  PC…ウィンドウサイズの50%のpが2つ横に並ぶ。
     各々のpの中に400X400px画像がある。
  SP…①と同じ

③imgにmax-width:50%;

  PC…①と同じ
  SP…widthがウィンドウサイズの50%  
  画像が全て見える状態で見切れず縮小される

④imgにwidth:50%;

  PC…widthがウィンドウサイズの50%
  SP…③と同じ


つまり、
画像サイズより表示される範囲が小さくなった時に…

img画像にwidthもしくはmax-widthどちらで指定した場合でも、
widthもしくはmax-widthで指定したサイズが確保され、それに従ってheightも縮小される。⇒backgroundのcontainと似ている。


逆に、
imgを囲うpにwidthもしくはmax-widthどちらで指定した場合でも、
widthもしくはmax-widthで指定したサイズは確保されるが、heightは画像サイズ縦幅を保持し画像が見切れる。⇒backgroundのcoverと似ている。


また、
max-widthは、画像サイズより表示される範囲が小さくなった時に初めて効果があらわれるため、PCサイト時はimg画像のサイズで表示される。


※ちなみにpはdivにしても結果は同じになる。
※imgはwidth,height指定をしなくても画像が表示されるが、backgroundは指定しないと表示されない。