响应：调整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属性来控制背景的大小。

E.g：

#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; 

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