拡大上限が異なる
状態:-
閲覧数:10,263
投稿日:2012-02-08
更新日:2017-03-23
先日、下記のように書いたけど、「max-width:100%;」と「width : 100%;」の違い(の一つ)に気付いたのでメモ
レスポンシブの画面サイズによる画像サイズ自動変更は、「max-width:100%;」によって行なわれる。
例えば、img{width:600px;!important;}とかしていると機能しない
max-width:100%;で困るのは、
・「Google MAP API V2」地図が表示されなくなる
・GoogleADsenseなど、直接imgタグを触れない場合
GoogleADsenseに関しては、上位タグに「max-width:100%;」でイケる
分からないのは、max-width:auto;(多分この指定は出来ない)とか、width:auto;とかの違い
例えば、img{width:600px;!important;}とかしていると機能しない
max-width:100%;で困るのは、
・「Google MAP API V2」地図が表示されなくなる
・GoogleADsenseなど、直接imgタグを触れない場合
GoogleADsenseに関しては、上位タグに「max-width:100%;」でイケる
分からないのは、max-width:auto;(多分この指定は出来ない)とか、width:auto;とかの違い
「max-width:100%;」は原寸画像幅までしか拡大しない ／ 「width:100%;」は要素幅まで拡大する
max-width:100%;
原寸画像サイズまで拡大
例.画像サイズが100pxの場合
・div枠が200pxだったとしても、100pxまでしか表示しない
※あくまでも最大表示サイズは、原寸。決して拡大表示されることはない
width:100%;
原寸画像サイズ以上に拡大
例.画像サイズが100pxの場合
・div枠が200pxだったとしたら、200pxまで拡大表示される
※確認ブラウザは、Firefox10.0。他ブラウザだとまた挙動が異なるかもしれない
ところで、今、書いてから気付いたんだけど、分からないのは、「max-width:auto;」と「width:auto;」の違いであって、「max-width:100%;」と「width : 100%;」の違いではなかった。まあ、でも、こっちもあんまり分かってなかったので、このエントリーは消さずに残しとこー
レスポンシブサイトにおけるスマホ表示用画像指定
結論
imgタグへ指定したクラスへ下記CSSを指定
※下記例ではimgタグへ指定している
img {
max-width: 100%;
height: auto;
}考え方
1.画像横幅
・可能な限り原寸表示
・スマホ横幅サイズに合わせて自動縮小
max-width: 100%;
2.画像高さ
・上記1で設定した横幅に合わせて(同じ縦横比率で)、高さを表示
height: auto;
ありがちな間違い
img {
max-width: 100%;
max-height: 100%;
}img {
max-width: auto;
max-height: auto;
}