调整图像大小以填充背景，无论页面高度和宽度如何（同时保持正确的比例）

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中）（因为横向比率）由于“min-height：”100％“而切换到100％，我需要宽度要改为“自动”，我该如何做到这一点？干杯，斯蒂夫

Answer 1

您可以使用css背景图片并设置：

background-size: cover;