javascript - モバイルデバイス用にhtmlで画像を設定する方法

Question

問題は、スマートフォンによってディスプレイの解像度が異なることです。

たとえば、840x560、480x320、または 800x480 があります。

「すべての」最新のスマートフォンの画像をディスプレイに合わせるには、メタタグ、css などとして何を書く必要がありますか?

私の懸念が明確に説明されていることを願っています。

Answer 1

img {最大幅: 100%;}

トリックを行います

Answer 2

特定の画面サイズをターゲットにするには、@media クエリを使用する必要があります。Plusbackground-size: cover;は、イメージを .block コンテナーに適合させます。

参照: https://developer.mozilla.org/en-US/docs/CSS/background-size

@media screen and (max-width: 840px) {
    .block {
        display: block;
        width: 100%;
        height: 100%;
        background: url(/path/to/image) no-repeat center center transparent;
        background-size: cover;
    }
}