モバイル対応のウェブサイトの画像は？

Question

モバイル対応のWordpressウェブサイトを作成しています。メディアクエリを使用して、モバイルデバイスで表示されている場合、モバイルCSSファイルにリンクします。私がブログに投稿を投稿するとき、画像は明らかにモバイル画面用に大きくなるでしょう。私はそれをどのように解決するべきですか？

Answer 1

以下のCSSを使用して画像を拡大/縮小できます。

img{ 
    max-width:100%; 
} 

あなたはあなたの中にビューポートを使用していない場合は、タグを頭このいずれかを使用します。あなたは、ズームセットのユーザースケーラブルを停止する場合は、上記のコードは、デバイスのビューポート内のサイトをスケールします

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" /> 

を=いいえ

Answer 2

さまざまな画面サイズに対して「バケット」を作成し、メディアクエリに基づいてさまざまな背景イメージを使用することをお勧めします。

たとえば、画像幅で4つのバケットを作成することができます。

• 400ピクセルのための300-500px
• 800ピクセルのための500-800px
• 1200px 800-1200px
• 1400pxのためにのために1200px +

CSSでは、次のようなメディアクエリを作成できます。

#elem { 
    max-width: 100%; 
} 
@media all and (min-width: 300px) and (max-width: 500px) { 
    #elem { 
     background: url(../images/logo-400.jpg) left center no-repeat; 
    } 
} 
@media all and (min-width: 500px) and (max-width: 800px) { 
    #elem { 
     background: url(../images/logo-800.jpg) left center no-repeat; 
    } 
} 
@media all and (min-width: 800px) and (max-width: 1200px) { 
    #elem { 
     background: url(../images/logo-1200.jpg) left center no-repeat; 
    } 
} 
@media all and (min-width: 1200px) { 
    #elem { 
     background: url(../images/logo-1400.jpg) left center no-repeat; 
    } 
} 

「最小幅」と「最大幅」の両方を使用すると、デバイスは特定の「バケット」に適合するイメージのみをダウンロードします。