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

CSS

拡大上限が異なる

 状態:-  閲覧数: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;とかの違い


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

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

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

 閲覧数:315 投稿日: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%;」の違い」に関する最新ツイート


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

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



類似度ページランキング
順位 ページタイトル抜粋
1 max-width: 100%の効果を打ち消すには、max-width: none; 41
2 「PhotoShop CS3」 と、「Vieas」 の違い 33
3 レスポンシブの margin と width 設定 32
4 「css3-mediaqueries-js」と「Respond.js」の違い 29
5 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 28
6 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; 26
7 「Data URI scheme」画像拡張子は、正しいとは限らない 26
8 Virtual DOM / 擬似要素 / Shadow DOM の違いが分からない 26
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない 25
10 「z-index」が効かない時は「-1」を指定してみる 25
11 横一列 / display:flex; 25
12 Chromeで閲覧している任意URLのhtmlタグに対して、なるべく簡単に「html{font-size:0.1em!important;}」を追加したい 25
13 「align-items: center;」「align-self: center;」「align-content: center;」の違い 24
14 「Aptana Studio 3.0.8」を使ってみた感想 24
15 「:first-child」が効かない場合は「:first-of-type」 24
16 要素の alt 属性 と、
要素の違い
24
17 ページで使用されている「id名」「class名」をChromeで取得したい   24
18 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 24
19 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 24
20 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する 24
2023/1/28 23:09 更新
週間人気ページランキング / 1-21 → 1-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 42
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 26
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 25
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 20
5 CSSでループ処理。一定間隔で(背景色等を)繰り返し指定する | CSS 12
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 12
5 GIFアニメーション | 画像 12
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 12
6 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 11
7 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 10
7 「bgcolor」「background-color」「background」の違い | CSS 10
7 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 10
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 10
7 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 10
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
8 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 9
8 ICCプロファイル | カラーマネージメント(色) 9
8 Design 0 9
8 RGBの種類 / ビットカラー | RGB(色) 9
9 「属性」「プロパティ」「アトリビュート」の違い | CSS 8
2023/1/28 1:01 更新