拡大上限が異なる
状態:-
閲覧数:9,721
投稿日: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;
}
Twitter検索結果。「 「max-width:100%;」と「width : 100%;」の違い」に関する最新ツイート
夜のテンションでレシラム色違い100%をMAX強化しました🤩💪
このXLアメは色んな人に招待いただいた友情の結晶です😊
大事に使います🙇✨ https://t.co/zY5AOa9kGD 2023/01/28 21:32

カプ・コケコの色違い、3回目で出ちまったー。個体値100は以前のレイドでゲットしてるので、コケコは終わりかな?もしくはアメXLを296貯めるまでやる?MAXまで強化するメリットあるかしら?#ポケモンGO https://t.co/T1on5pcpQC 2023/01/25 20:53

昨日捕獲した色違いの個体値100、MAX強化しようとしたらXLが足りない・・・
コミュニティデイやったのに足りないっていったい🥺
#ポケモンGO https://t.co/yPDSqbu8I0 2023/01/22 14:01

ヨーギラスのコミュデイお疲れ様でした🤩
今日はPokemon GOで初めて色違い100に出会えました🤩
すぐに進化とMAX強化🔥
相棒MAXまでしっかり愛でます🤗 https://t.co/TI7o56JBW1 2023/01/21 19:56



復刻コミュデイお疲れ様でした(*ˊ꒳ˋ*)
今回は、彼氏の100通知に付き合わされたので個体値MAX4体は捕まえられたけど色違いは25体のみ🥱
くそ電波悪くて困ったぜ〜
バクでハイパーボールを客観視するヨーギラスの姿が見れて少しおもろかったから許すけど𐤔𐤔𐤔 https://t.co/ch7nF1M4gC 2023/01/21 19:42



寒い中ヨーギラスコミュデイお疲れ様でした!個体値MAXはきませんでしたが色違いは46体もゲットしました🥳
卵からダルマッカの100%が産まれたので次は色違いお願いします🙇♀️
#ポケモンGO #コミュデイ #ヨーギラス https://t.co/nWLuVDu2v0 2023/01/21 18:27



コロナワクチンの副反応で全身だるくて近所1時間しか参加出来なかったけど今年初の100%GET💯🎉
飴XLも2匹はMAX強化出来るから大満足!🈵😆
後はもう1匹のメガ進化(いわ)を100の子にするか色違い96の子にするべきか考えなくては!😊👍️ https://t.co/Qx4qlOviht 2023/01/21 17:47




2307、2307
交換の時大きな声で叫んでたら😳😳😳😳😳😳
今日キラフレなってからの今日交換😉
いきなりのお誘いに対応してもらい
初じめて色違いキラMAX✨
感謝しかない😍
自分も100あげれるよう頑張ります💪🏽
キラ交換万歳🙌 https://t.co/X8uDMSNwrJ 2023/01/20 21:41
