「max-width:100%;」と「width : 100%;」の違い

CSS

拡大上限が異なる

 状態:-  閲覧数:8,481  投稿日: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;とかの違い


「max-width:100%;」は原寸画像幅までしか拡大しない / 「width:100%;」は要素幅まで拡大する

 閲覧数:366 投稿日:2012-02-08 更新日:2017-03-23 

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%;」の違いではなかった。まあ、でも、こっちもあんまり分かってなかったので、このエントリーは消さずに残しとこー

レスポンシブサイトにおけるスマホ表示用画像指定

 閲覧数:153 投稿日:2017-05-29 更新日:2017-05-29 

結論


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%;」の違い」に関する最新ツイート

ハットリシンヤ|マーケとカメラとイロイロ @FACTDEAL

divタグがdisplay:block;とかしても、ブロック要素にならないときは、

max-width: 100%の効果を打ち消すには、max-width: none;



類似度ページランキング
順位 ページタイトル抜粋
1 max-width: 100%の効果を打ち消すには、max-width: none; 41
2 「PhotoShop CS3」 と、「Vieas」 の違い 33
3 「css3-mediaqueries-js」と「Respond.js」の違い 29
4 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 28
5 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; 26
6 「Data URI scheme」画像拡張子は、正しいとは限らない 26
7 Virtual DOM / 擬似要素 / Shadow DOM の違いが分からない 26
8 「z-index」が効かない時は「-1」を指定してみる 25
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない 25
10 横一列 / display:flex; 25
11 「align-items: center;」「align-self: center;」「align-content: center;」の違い 24
12 「Aptana Studio 3.0.8」を使ってみた感想 24
13 要素の alt 属性 と、
要素の違い
24
14 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 24
15 ページで使用されている「id名」「class名」をChromeで取得したい   24
16 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 24
17 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 24
18 「Public domain」と「Public Domain Dedication (CC0)」 24
19 一つの要素に対して「id 属性値」を複数指定することは出来ない 24
20 「Bootstrap, from Twitter 2」で、「Dropdowns bootstrap-dropdown.js」が動作しないときの対応案 23
2021/7/24 20:39 更新
週間人気ページランキング / 7-17 → 7-23
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 53
2 血の色 / #b30000 / #360800 / #ff0000 | 色 26
3 Design 0 23
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 17
5 HTML5では、「input 要素」「button 要素」を「フォームタグ」の外で直接記述しても良い | HTML5(HTML) 15
6 HSLとHSVの違い | 色変換(色) 14
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 13
8 「bgcolor」「background-color」「background」の違い | CSS 12
8 「CSSキーフレームアニメーション」実行後のCSS設定 | アニメーション 12
9 RGBの種類 / ビットカラー | RGB(色) 11
10 画面キャプチャ | Chrome 拡張機能(ブラウザ) 9
11 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 8
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 8
11 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 8
12 16進数カラーコード / 2進数 7
12 コズミックブルーが何色か分からない | 色 7
13 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
13 「属性」「プロパティ」「アトリビュート」の違い | CSS 6
2021/7/24 1:01 更新