”max-width:100%”について

Question

HTMLレスポンシブデザインのFluid imageの”max-width:100%”について質問させてください。
とあるサイトで、”max-width:100%”の説明が、「ブラウザの幅に応じて画像が拡大・縮小するが、元の画像よりも大きくはならない」と書いているものがあります（こちらを説明Aとします）。
この説明は正しいのでしょうか？
ほかのサイトでは、『「画像の大きさの最大値」が「親要素のwidth幅の100%の値」』となっています（こちらを説明Bとします）。Bの説明なら理解できます。ですが、Aの説明だと、仮に元の画像の幅が1000px、親要素が、ブラウザの幅で960pxの場合を想定すると、画像の幅は元の画像幅の1000pxまでは大きくなるので、ブラウザから画像が40pxはみ出ることになります。Bの説明だと、画像の幅が親要素（ブラウザの幅）の100％を最大値とするのだから、ブラウザ幅いっぱい（100％）に広がりはみ出ることはないと思います。
ただAの説明をしているサイトが間違ったことを書いてあるとも思えず、私の認識の甘さで、結局どちらも正しいことを言っているのかもしれない、であるならどう解釈すればいいのか手助けをいただきたいと思った次第です。

　追伸、質問を書いてから気がついたのですが、AとBの説明には、”max-width:100%”の"100%"が元の画像の幅をさしているのか、親要素の幅をさしているのかという違いがあるような気がしています。やっぱりAの説明はまちがっているのでしょうか？

回答よろしくお願いしますm(__)m

Answer 1

この手のサイトはもちろん書籍であっても結構誤りが多いのがこの業界（言い過ぎか？ｗ
また、昔正しい事が書いてあったはずの資料が、現在は仕様変更等により正しく無くなったなんて事もしばしばあります。

所詮は企業が作ったものなので動くものが真実という側面もあり
時には検証して自分の目で確かめたものを真実として取り入れる必要もあるかもしれません。
ちょっと書いてみたので挙動を見ながら弄ってみるといいと思います。

検証コード

https://jsfiddle.net/5bL8e3ks/

<div>指定なし</div>
<img src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/177223/061af5094a21beeb_thumbnail.png">
<hr>

<div>囲みあり</div>
<select id="styleSelector1">
  <option value="50">width: 50%</option>
  <option value="100" selected>width: 100%</option>
  <option value="150">width: 150%</option>
  <option value="200">width: 200%</option>
</select>
<div id="styleView1">width: 100%(95x95[px])</div>
<div style="width: 95px; height: 95px;">
  <img id="iconImg1" src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/177223/061af5094a21beeb_thumbnail.png">
</div>

<hr>

<div>囲み無し</div>
<select id="styleSelector2">
  <option value="50">width: 50%</option>
  <option value="100" selected>width: 100%</option>
  <option value="150">width: 150%</option>
  <option value="200">width: 200%</option>
</select>
<div id="styleView2">width: 100%(95x95[px])</div>
<img id="iconImg2" src="https://teratail-v2.storage.googleapis.com/uploads/avatars/u17/177223/061af5094a21beeb_thumbnail.png">

jQuery3.4を使用

const styleView1 = $('#styleView1');
const iconImg1 = $('#iconImg1');
const styleView2 = $('#styleView2');
const iconImg2 = $('#iconImg2');

$('#styleSelector1').on('change', (event) => {
  let selected = event.currentTarget.value;
  iconImg1.css({width: selected + '%'});
  let w = iconImg1.width();
  let h = iconImg1.height();
  styleView1.html('width: ' + selected + '% - (' + w + 'x' + h + '[px])');
}).trigger('change');

$('#styleSelector2').on('change', (event) => {
  let selected = event.currentTarget.value;
  iconImg2.css({width: selected + '%'});
  let w = iconImg2.width();
  let h = iconImg2.height();
  styleView2.html('width: ' + selected + '% - (' + w + 'x' + h + '[px])');
}).trigger('change');

#iconImg1, #iconImg2 {
  max-width: 100%;
}

Comments

[susumu-99]

検証していただき大変ありがとうございます。

初めてみるサイトで使用方法が分からないため、またゆっくり見せていただきます。

Answer 2

ただAの説明をしているサイトが間違ったことを書いてあるとも思えず

それが間違いです。間違ったことを書いてあるWebサイトは、山のようにあります。

Comments

[maisumakun]

max-width を包含ブロックの幅に対するパーセント値で定義します。

https://developer.mozilla.org/ja/docs/Web/CSS/max-width

[susumu-99]

そうなんですね。やっぱりAの説明はまちがっているという解釈でいいんですか…
Aの説明はとある評価の高いサイトのものだったので、こんな基本的な部分で間違いがあるとはがっかりです(´；ω；`)ｳｩｩ

回答ありがとうございました！

[maisumakun]

自然な幅がある画像に対してmax-widthをかけても、自然な幅以上に拡大されることはありません。

[susumu-99]

AもBも別のことを言っているが、両方とも正しいということでしょうか？

[maisumakun]

Aの説明は、max-widthの挙動自体を説明したもので、「100％」の意味に触れていないのではないでしょうか？

[susumu-99]

回答ありがとうございます。
元の画像の幅を100％として、100％より大きくならないという意味ではないのでしょうか？
回答で書いていただいたMDNのサイトにmax-width:75%とうものがありましたが、それは元の画像の幅を100％としたときの75％以上にはならないというふうに解釈しました。

あとすいません、２つ目にいただいた回答の「max-width を包含ブロックの幅に対するパーセント値で定義します。」に戻らせていただきたのですが、この場合、包含するブロックというのは質問内のブラウザ（親要素）の幅を指しますか？画像（”max-width:100%”を指定している要素）の幅を指しますか？

[maisumakun]

> 回答で書いていただいたMDNのサイトにmax-width:75%とうものがありましたが、それは元の画像の幅を100％としたときの75％以上にはならないというふうに解釈しました。

違います。パーセントの基準は包含ブロック（positionなどでずらさなければ親要素）です。

[susumu-99]

回答ありがとうございます。
そうですか
であれば”max-width:100%”の100%は親要素の100%ということになるので、質問中のBの説明は間違いではなさそうですね。
一方で、こちらもmaisumakunの回答でいただいた内容ですが、『Aの説明は、max-widthの挙動自体を説明したもので、「100％」の意味に触れていないのではない』のであり正しい内容であれば、
結論として、「”max-width:100%”は元の画像の幅が親要素の幅の100％より大きければ、親要素の幅100%を最大とするが、元の画像の幅が親要素の幅の100％より小さければ、元の画像の幅を最大とする」ということになるんでしょうか

[susumu-99]

なんか目から鱗で理解できたような気がします。長時間、質問にお付き合いいただき大変ありがとうございました。
またよろしくお願いします。