html - 响应式：在 div 中调整背景图像的大小

Question

我正在使用下面的代码将图像显示为div. 如何调整它的大小？

#header {
    height: 255px;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    background-position: 50% 50%;
    background-image: url('../simg/header.png');
}

Answer 1

您可以尝试使用该background-size属性来控制背景的大小。

例如：

#header {
height: 255px;
-webkit-background-size:50%;
-moz-background-size:50%;
background-size:50%;
background-position: 50% 50%;
background-image: url('../simg/header.png');
}

这会将背景图像在任一维度上减少到一半。

Answer 2

尝试简单的背景调整大小 .js http://johnpatrickgiven.com/jquery/background-resize/

Answer 3

您可以尝试的另一种方法是设置 css

background-size:contain;  
width:50%; 
max-height:255px; 

并让浏览器找出导致它保持纵横比的高度。