画像を画面に合わせてサイズを変更する

Question

画面が小さくなると、たとえばサイトがiPhoneまたはiPadで表示されているときに、画像が画面に対して大きすぎるような画像がヘッダーとして表示されます。

画像はナビゲーションをカバーし、サイトを使用できなくします。

画像のサイズを画面のサイズに合わせて変更する方法を見つける必要があります。

どうすればいいですか？

Answer 1

私はあなたの容器が100％の流体幅を持ち、異なる画面サイズにうまく適応できると仮定しています。その場合、

img { 
    max-width: 100%; 
} 

を使用することができ、画像はその親コン​​テナの幅を超えることはありません。
または応答デザイン分野から、より高度なソリューションの一部：あなたはCSSメディアクエリを使用することができます

• Adaptive Images
• Picturefill

Answer 2

。この例では

画面幅は、それが親要素の画像最大幅OT 100％に設定します1024px未満である：デバイス（風景モードでのiPad）の最大解像度によって幅を選択

@media screen and (max-width: 1024px){ 
    img { max-width: 100% } 
} 

をあなたはそれをしたいと思っています。

あなたは{}内に他のものをスタイルすることができます。

しかし、まだフルイメージをダウンロードしています。

メディアクエリの詳細here