javascript - Webデザインの広範な画像

Question

私はウェブサイトをコーディングしていて、www.airbnb.comのようなものを作ろうとしています。つまり、上部に静的なバー（この部分は問題ありません）と、すぐ下に大きな中央のボタンがある大きな画像を意味します。

この大きな画像をすべての画面解像度で正常に表示するにはどうすればよいですか。現時点では、1920 * 1080pxでは、大きなボタンが中央に配置された状態で画像が完璧になります。しかし、解像度を変更すると、画像がトリミングまたはサイズ変更されます...

どうすればそれができるか知っていますか（cssまたはjavascript）？

どうもありがとう！

score 1 · Accepted Answer

CSSメディアクエリを使用して、解像度に応じて物理的に異なるサイズの画像を読み込むことができます。

元のデスクトップの背景：

body {
    background:url(images/bg1.jpg) no-repeat 0 0;
}

最大解像度が800pxの画面の場合：

@media (max-width: 800px) {

    body {
        background:url(images/bg2.jpg) no-repeat 0 0;
    }

}

最大解像度が480pxの画面の場合：

@media (max-width: 480px) {

    body {
        background:url(images/bg3.jpg) no-repeat 0 0;
    }

}

選択する解像度は明らかに自分次第であり、上記は例としてのみ示されています。

score 0 · Accepted Answer

を使用している場合は、と属性をそれに<img>設定します。widthheight

画像を既存の要素の背景として使用している場合は、背景に正しいスタイルを設定します。

div{
  background:url(img_flwr.gif);
  background-size:80px 60px;
  background-repeat:no-repeat;
}

2 に答える 2