javascript - ページの高さと幅に関係なく、背景を埋めるように画像のサイズを変更します (正しい比率を維持しながら)。

Question

ページが読み込まれるたびにランダムな画像として機能する背景があります。

HTML:

<div id="images">
    <img id="background" height="100%" width="auto"/>
</div>

CSS:

#background {
    width: 100% !important;
    height: auto;
    min-height: 100%;
    position: fixed;
        top: 0px;
        left: 0px;
    z-index: 1;
}

JS:

<script type="text/javascript"> var imgs=["/backgrounds/1.jpg","/backgrounds/2.jpg","/backgrounds/3.jpg","/backgrounds/4.jpg","/backgrounds/5.jpg"]var rand = Math.round(Math.random()*imgs.length)onload=function() {background.src = imgs[rand]}// JavaScript Document</script>

問題は、横長の比率の画像 (背景ではなく div 内) が「最小高さ: "100%" により 100% に切り替わるとすぐに、幅を変更する必要があることです。 「自動」、どうすればこれを達成できますか?乾杯、Steff

Answer 1

CSS の背景画像を使用して、次のように設定できます。

background-size: cover;