Question

我的项目依赖于块 - 如果您在菜单中单击href，例如“about”站点，则会阻止使用backogrund图像。块的背景必须根据分辨率用户进行调整。 Everythnig工作得很好，但是如果我们想要在宽度图像中改变大小的浏览器只是无意识的扭曲。我想，如果我们想留下来，就不可能解决这个问题：

width:100%; 
height:100%;

SO如何制作带有bacgrounds图像的div，它将调整为widscreen的分辨率，但如果我们将浏览器的大小更改为自定义示例：365x900 background-image仍将采用相同的分辨率（相同的分辨率意味着大小是依赖的）在屏幕分辨率上）

当bacground图像将调整到标准分辨率时，最好的情况是，但如果我们将更改浏览器大小，例如在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/>。

CSS浏览器宽度

1 个答案: