css - 画像のサイズ変更 html/css

Question

Facebookアプリにいくつかの画像があります。問題は、画像が非常に大きく、コンピューターからアクセスするか電話からアクセスするかに関係なく、見栄えがする必要があることです。画面のサイズが異なることを考えると、固定サイズに設定すると明らかに見栄えが悪くなります。
では、どの画面でも見栄えがするようにサイズを変更するにはどうすればよいですか?

Answer 1

メディア クエリを使用します。例えば：

 @media all and (min-width: 1001px) {
  img {
    width: 100%; /* insert prefered value */
    height: auto;
  }
}

@media all and (max-width: 1000px) and (min-width: 700px) {
  img {
    width: 100%; /* insert preferred value */
    height: auto;
  }
}

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  img {
    width: 100%; /* insert preferred value */
    height: auto;
  }
}

Answer 2

これを試して

 img
 {
    width:100%;/*adjust this value to your needs*/
    max-width: the size of the image;/* so it wont get bigger and pixelated*/
    height:auto;
 }

可能であれば別のオプションとして、メディア クエリを使用する方法があります。そのため、ブラウザーのサイズが異なる場合は、異なるサイズの画像を読み込むことができます。

これがあなたが達成しようとしているものかどうかを確認するためのフィドルです