html - CSS 浏览器宽度

Question

我的元素依赖于 block - 如果您单击菜单中的 href，例如“关于”站点，您将使用背景图像进行 block 。 block 的背景必须适应分辨率用户。 Everythnig 工作得很好，但如果我们想改变宽度图像中的浏览器大小，就会出现不自然的扭曲。我认为解决这个问题是不可能的，如果我们想继续:

width:100%; 
height:100%;

所以如何使用 bacgrounds 图像制作 div，这将调整到 widscreen 的分辨率，但是如果我们将浏览器的大小更改为自定义示例:365x900 背景图像仍将具有相同的分辨率(相同的分辨率意味着尺寸是依赖的在屏幕分辨率上)

最好的情况是 bacground-images 将调整为标准分辨率，但如果我们将更改浏览器大小，例如 200x900，那么它们将不会更改其大小并仍然保持最大(最大大小取决于在屏幕分辨率上)

CSS

#raz {
    background-size:100%;
    background-repeat: no-repeat;
    margin-top: -300px;
    border: 0px;
    padding: 0px;
    left: 0px;
    width: 1200px;
    height: 100%;
    overflow: hidden;
    z-index: 0;        
}

#bg_raz {
    position:absolute;
    text-align:center; 
    width:100%; 
    height:100%;
}

#dwa {  
    background-size:100%;
    background-repeat: no-repeat;
    margin: 0px;
    border: 0px;
    padding: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;        
}

#bg_dwa {
    position:absolute; 
    width:100%; 
    height:100%;
}

HTML

<div id="dwa"> 
    <img id="bg_dwa" src="http://lorempixel.com/output/city-q-c-600-325-4.jpg">
</div>

<div id="raz"> 
    <img id="bg_dwa" src="http://lorempixel.com/output/city-q-g-600-325-7.jpg">
</div>

JSBIN

Answer 1

如果您使用 background-size: cover;并添加 background-image在 #dwa , 你可以删除 <img/> .