html - レスポンシブ デザイン - 小さな画面で画像を正常に表示するにはどうすればよいですか?

Question

私はこのテストページに取り組んでいます: http://problemio.com/index_test.php

ノートパソコンの画面では問題ないようです。しかし、私の携帯電話のブラウザではひどく見えます。特に画像がごちゃごちゃしてます。

画像が正常に見えるようにするにはどうすればよいですか?

ありがとう、アレックス

Answer 1

オメガは正しい考えを持っていますが、widthパラメーターも設定する必要があります。私は通常width、パーセンテージ値とmax-widthピクセル値に設定します。そうすれば、最大幅を超えると、本質的にそれを捨てて、幅だけを見るようになります。これに沿った何か

img {
  max-width:500px; /*Once screen size is smaller than 500px, the image reverts to the width value*/
  width:100%;
}

JSFiddle

Answer 2

メディア クエリを使用して、モバイル デバイスの要素のスタイルを設定します。画像では、最大幅と最小幅の値とともにパーセンテージも使用します。

@media screen and (max-width:480px) {
    //CSS sizes for mobiles only
}

Answer 3

画像にピクセル メッセージを設定せず、代わりに img タグにこの css を使用します。

img {
max-width: 100%;
height: auto;
}