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

CSS

拡大上限が異なる

 状態:-  閲覧数:10,727  投稿日: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%;」は要素幅まで拡大する

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

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

 閲覧数:570 投稿日: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;
}



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

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



類似度ページランキング
順位 ページタイトル抜粋
1 「max-width:100%;」と「width : 100%;」の違い 57
2 max-width: 100%の効果を打ち消すには、max-width: none; 41
3 「PhotoShop CS3」 と、「Vieas」 の違い 33
4 レスポンシブの margin と width 設定 32
5 「css3-mediaqueries-js」と「Respond.js」の違い 29
6 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある 28
7 height:100%;の効果を打ち消す(あるいは上書きする)には、height:auto!important; 26
8 「Data URI scheme」画像拡張子は、正しいとは限らない 26
9 Virtual DOM / 擬似要素 / Shadow DOM の違いが分からない 26
10 「z-index」が効かない時は「-1」を指定してみる 25
11 「:after擬似要素」は、Chromeの「要素を検証」で確認できない 25
12 横一列 / display:flex; 25
13 Chromeで閲覧している任意URLのhtmlタグに対して、なるべく簡単に「html{font-size:0.1em!important;}」を追加したい 25
14 「align-items: center;」「align-self: center;」「align-content: center;」の違い 24
15 「Aptana Studio 3.0.8」を使ってみた感想 24
16 要素の alt 属性 と、
要素の違い
24
17 「:first-child」が効かない場合は「:first-of-type」 24
18 背景画像がどうしても表示されない → 「clear:both;」を挿入してみる 24
19 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 24
20 ページで使用されている「id名」「class名」をChromeで取得したい   24
2025/8/29 10:55 更新
週間人気ページランキング / 8-22 → 8-28
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 15
2 鉄道会社毎のカラーコード | カラーコード(色) 14
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 13
4 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 8
5 Design 0 7
6 「bgcolor」「background-color」「background」の違い | CSS 6
7 色モデルイメージ図 | 色変換(色) 5
7 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 5
7 RGBの種類 / ビットカラー | RGB(色) 5
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
8 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 4
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 4
8 「直後が A 要素 でない B 要素」を指定するCSSセレクタは、「A:not(:has(+ B)) {}」 | CSS 4
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
9 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 3
9 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 3
9 G'MIC | GIMP 系(ソフトウェア) 3
9 個人的によく見返すエントリーへのLinkなど | その他 3
9 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 3
2025/8/29 1:01 更新