2

ラップトップ、PC、iPad、モバイル画面のポートレイト ビューやランドスケープ ビューなど、あらゆる方法で画像サイズ (幅と高さ) を処理する方法を教えてください。ただし、メディアクエリは使用しません。

ある時は大きな画像を取得するために使用し、ある時は小さな画像を取得していますが、メディアクエリを使用せずに通常の css のみを使用して同じサイズのすべての画像を表示したいと考えています。

必要なことをしてください。

4

4 に答える 4

2

通常、レスポンシブ レイアウトでは画像の解像度がレスポンシブであることが推奨されます。つまり、画像のサイズは css と html で同じである必要がwidth:100%ありheight:auto、画像はどの画面にも配置されます。

ページの上の head タグに次の行を追加することを忘れないでください:-

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2012-07-18T07:20:47.163 に答える
1

max-width スタイル プロパティを 100% として使用できます。解像度が大きい場合は画像に通常のサイズが含まれ、携帯電話のような小さいウィンドウでは画像が画面 (コンテナー) の幅になります。画像は比例して拡大/縮小されます。

<img src="sample.jpg" style="max-width:100%;" />
于 2012-07-18T07:28:44.070 に答える
0 
<img src="img1.jpg" width="100%" height="100%" />
<img src="img2.jpg" width="100%" height="100%" />

..。

于 2012-07-18T07:18:12.873 に答える
0

css自体で高さと幅を設定できます

たとえば、div id を sample_div_img として使用している場合は、次のコードを使用します

#sample_div_img img{
height:100px;
width:100px
}

php / htmlで

<div id='sample_div_img>
 <img src='sample.jpg'>
</div>

画像のサイズがcssに記載されているものと異なる場合、画像がぼやけて見えることがあります

この問題について教えてください

于 2012-07-18T07:23:24.990 に答える