web-dev-qa-db-ja.com

CSSによる画像スケーリング

今は実際には必要ありませんが、好奇心から...

fluid Webサイトのレイアウトがあり、1920pxのディスプレイや小型のスマートフォンで完全に機能するとします。ここに画像があり、明らかに（明らかに？）それらを拡大縮小したいとします。サーバーに2560pxの画像をアップロードし（最近は帯域幅を気にしているため）、width: 100%プロパティをimgタグに設定しました。

つまり、1920pxのディスプレイを備えたプログラマーをJoと呼び、スマートフォンを持った女子学生をNancyと呼びましょう（Nancyの方がすべてが優れているからです）。

JoとNancyは、width: 100%を使用して画像を拡大縮小する計画が機能するので満足していますが、幅400pxなどの小さな画像も表示することにした場合はどうでしょうか。ナンシーは何も気付かないでしょう、しかしジョーにとってそれは惨事でしょう。

つまり、問題は、JavaScriptを使用せずにJoとNancyを幸せにすることができるかということです。

cssresponsive-design
10
Daniel J F

代わりにmax-width: 100%に行きませんか？

これにより、画面の幅よりも小さい画像はすべてそのままになり、画面よりも広い画像のサイズは100％になりすぎます。問題は解決しました、みんな幸せです！

22
Filip

幅に基づいてさまざまな画面にさまざまな画像を送信したい場合は、私たちがよく耳にする条件付きメディアクエリに飛び込む必要があります。
これは素晴らしいウェブサイトです： http://webdesignerwall.com/tutorials/css3-media-queries

2
Mr Lister

フィリップが述べたように私はmax-width: 100%を使用しましたが、以下も含める必要がありました。

height:auto

そうしないと、高さがスケーリングされません。

1
ContextSwitch