css - ビューポートの幅に合わせて画像のサイズを変更する

Question

こんにちは、私のウェブサイトには全幅のバナーがあります。このバナーはフォトショップで作成しました (幅:1350px、高さ:375px)。これにアクセスするには、次の css と html を使用します。

#slider {
 margin-top:10px;
 height:375px;
 background:url(../Home/banner1.jpg) no-repeat center left;
}

ブラウザーのサイズが変更されたときに、このバナーのサイズを比例的に変更したい (サイトhttp://www.endpolio.org/のバナーのように)。別のサイズを入れると

@media handheld, only screen and (max-width: 767px) {
.....
}

その特定の幅でのみサイズ変更されます。すべてのピクセル (幅と高さの両方) で画像のサイズを変更したい。それはどのように可能ですか？私を助けてください。

score 2 · Accepted Answer

background-size:containプロポーションを保つために使用します。

ここに略記があります。background:url('') 0px 0px / contain no-repeat;

更新された CSS:

#slider {
    width:100%;
    height:375px;
    background:url('http://placehold.it/1350x375') 0px 0px / contain no-repeat;
}

の高さを変更するだけ#sliderです。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-sizeに関する情報については、MDN を参照してください。background-size

score 2 · Accepted Answer

background-size:contain

background-size プロパティは、IE9 以降、Firefox 4 以降、Opera、Chrome、および Safari 5 以降でサポートされています。背景サイズ

2 に答える 2