解像度に基づいて画像のサイズを調整する

Question

私は1440 * 900解像度のモニタでウェブサイトを開発しています。このページには、グリッドのような構造の画像がたくさんあります。画像のサイズとその間のスペースは、使用していたモニタに基づいて設定されています。しかし、1280 * 800の画面解像度のモニタでテストしたところ、の画像は（予想通り）と大きすぎます。 ！ ユーザーは、画像のサイズとその間隔をユーザーの画面解像度に基づいてどのように調整できるかを提案できます。 Thanx ..

Answer 1

ます。また、親に対する割合で画像の幅を設定してみてください可能性がありコンテナ。例次に

<div class="imgWrapper"> 
<img src="something.jpg"> 
</div> 

CSSの場合：

.imgWrapper img { 
width:100%; 
} 

あなたのイメージと異なるセクションで異なる幅に一定の幅がある場合：

は幅に加えて、MAX-幅を追加します。 100％;

Answer 2

cssメディアクエリと画像の幅を組み合わせて使用​​できますin css。したがって、画面サイズの最大幅が1440の場合、CSSイメージの幅は、たとえばwidth: 200px;に設定されます。そして、画面サイズ最大幅1280のために、width:120px

のように、何か他のものに画像の幅を設定するここで素敵なメディアクエリーのチュートリアルです：http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/