0

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

width:100%; 
height:100%;

所以如何使用将调整到宽屏分辨率的免费图像制作 div，但是如果我们将浏览器的大小更改为自定义示例：365x900 背景图像仍将保持相同的分辨率（相同的分辨率意味着大小取决于屏幕解析度）

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

4

1 回答 1

1

如果你使用background-size: cover;和添加background-image，#dwa你可以删除<img/>。

于 2013-09-23T13:32:05.650 回答