-
ID:edPSS. さんの質問

max-widthの挙動についてどーーしても理解できないので教えてください。
max-widthについて下記のページに「親ボックスに対する割合を％で指定する方法があります」と書いてあるのですが、
http://www.htmq.com/style/max-width.shtml
bodyタグの中にimgタグしか入ってない場合、bodyタグが親になると思うのですが、imgタグに対してmax-width: 100%;を指定しても、なぜウィンドウ幅ピッタリに画像が拡大されないのでしょうか？？？width: 100%;を指定すると画像がウィンドウ幅ピッタリに拡大されますよね。この違いは一体何なのでしょうか？

みんなの回答 1 件

ID:V9buEY さんの回答

画像が小さいか、
bodyのmarginの分。
ID:edPSS.

画像が小さい場合で、例えば、width＝100pxの画像を960pxのbodyの中に配置して、画像にmax-width: 100%;を指定してもwidth＝100pxのままなのがなぜなのか理解できません...こういうもんだと思うしかないんでしょうか。。
「親ボックスに対する割合を％で指定する」といっても、元の画像の大きさを変えるものではないんですかね？

ID:US64Xp

「最大でも親ボックスの幅」って意味だから。「親ボックスの幅」にしたいなら width: 100% にしないと。

ID:edPSS.

なるほど...やっとわかりました、max-width:100%;にしたって、親ボックスの幅より小さいものを拡大することはできないってことですね。
レスポンシブとかで重宝するってよく聞くんですが、てことは、あれは、ウィンドウ幅より大きなものを小さくするために使ってるだけってことでいいんですよね。
でも、なんでわざわざmax-widthを使うのかわかりません。width＝◎◎%でいいんじゃないかって思うんですが...
原寸より大きくなって画像とかが荒くなるのは困る、ってことでしょうか？

ID:V9buEY

レスポンシブでも最大幅は想定してデザインする事が多いね。
あとは、本文や他のブロックを回り込みさせるレイアウトの時には、
あえて100%に拡大する必要はない。

ID:edPSS.

曖昧になってた部分が分かってスッキリしました。回答ありがとうございました！

最終更新日:2014-11-28 (2,787 views)

関連するトピックス

ページ上部に戻る