Q&A
> 検証ツールを確認するとwidthが表示されなかったので、
サンプルを作成して確認してみましたが、そんなことはないです。両方設定したら、検証ツールには両方表示されました。
現象が再現できるHTMLコードとCSSコードを提示できますか。
imgタグに「max-width: 100%」と「width: 100%」を適用した場合、
max-widthのみ適用されてwidthは適用されない認識で合っていますでしょうか？
(検証ツールを確認するとwidthが表示されなかったので、気になって質問させていただきました)
適用されない場合、max-widthとwidthではcssの適用される優先順位みたいなものがあるのでしょうか？
よろしくお願いいたします。
ご回答ありがとうございます。
<a class="logo" href="#">
<img src="img/xxx.jpg" alt="">
</a>
に対して
img {
max-width: 100%;
}
logo img {
width: 100%;
}
になります。
申し訳ございません、検証ツールでlogo imgの箇所のみ確認しておりました。
imgの箇所を確認するとmax-widthが付与されていることを確認いたしました。
恐れ入りますが、この場合、
max-width :100% → 最大の横幅を画像本来の大きさまでにする。
width : 100% → 親要素の大きさに合わせる。
ですので、親要素の大きさに合わせつつ、最大値は画像本来の大きさ、ということになるのでしょうか？
それとも
max-width :100% → 最大の横幅を画像本来の大きさまでにする。
width : 100% → 画像の大きさに合わせる。
ため、意味が重複している形になるのでしょうか？
(この場合、max-widthだけでも問題ないような気がしまして…)
ご回答いただけますと幸いです。
> max-width :100% → 最大の横幅を画像本来の大きさまでにする。
違います。%単位は、親要素の幅が基準になりますので、100%は親要素の幅と同じにするという意味になります。
max-width: 100%; は最大幅が親要素と同じ。
width: 100%; は幅が親要素と同じ。
結局、親要素の幅と同じということになります。
画像本来の幅は関係ないです。
max-width は width と同時に設定することで意味を持ちます。
max-width だけだと、幅を指定していないと同じ事になりますので、画像本来の幅になります。
例えば、下記のように２つを合わせて使います。
width: 100%;
max-width: 900px;
この場合、親要素の幅が900px以上になっても、最大値は900pxなので画像の幅900px、
親要素の幅が900px以下になったら100%が有効になって親要素の幅と同じになる。
とても分かりやすい解説ありがとうございます。max-width, widthの意味を含め、理解することが出来ました。
hatena19様の回答をベストアンサーにさせて頂きたいのですが、コメント欄ではベストアンサーに出来ないため、お手数お掛けいたしますが回答欄へ回答頂くことは可能でしょうか？
(hatena19様の実績にさせて頂きたいと思いお伝えさせ頂きました。どちらでも宜しければこのまま自己解決としてクローズさせて頂きます。)
では、このコメント欄に記載したコードと、このコードのご自身の解釈の部分を質問に追記してください。
このコメント欄は修正依頼のためのものですので。
閲覧者はこのコメント欄までは見ないことがほとんどなので、回答が意味不明のものになりかねません。
コメントさせて頂きました。
この度はありがとうございました。
回答1件
0
ベストアンサー
max-width :100% → 最大の横幅を画像本来の大きさまでにする。
違います。%単位は、親要素の幅が基準になりますので、100%は親要素の幅と同じにするという意味になります。
max-width: 100%; は最大幅が親要素と同じ。
width: 100%; は幅が親要素と同じ。
結局、親要素の幅と同じということになります。
画像本来の幅は関係ないです。
max-width は width と同時に設定することで意味を持ちます。
max-width だけだと、幅を指定していないと同じ事になりますので、画像本来の幅になります。
例えば、下記のように２つを合わせて使います。
width: 100%;
max-width: 900px;
この場合、親要素の幅が900px以上になっても、最大値は900pxなので画像の幅900px、
親要素の幅が900px以下になったら100%が有効になって親要素の幅と同じになる。
公式のドキュメントをよく読んで理解するようにすることをお勧めします。
投稿2022/12/13 14:44
総合スコア34345
ベストアンサーは、私の下記QAに対する回答でした。
hatena19様、ご回答頂きありがとうございました。
--------------------------------------------------------
<a class="logo" href="#">
<img src="img/xxx.jpg" alt="">
</a>
に対して
img {
max-width: 100%;
}
logo img {
width: 100%;
}
のコードの場合、
max-width :100% → 最大の横幅を画像本来の大きさまでにする。
width : 100% → 親要素の大きさに合わせる。
ですので、親要素の大きさに合わせつつ、最大値は画像本来の大きさ、ということになるのでしょうか？
それとも
max-width :100% → 最大の横幅を画像本来の大きさまでにする。
width : 100% → 画像の大きさに合わせる。
ため、意味が重複している形になるのでしょうか？
(この場合、max-widthだけでも問題ないような気がしまして…)
--------------------------------------------------------
あなたの回答
tips
プレビュー
