Question

我希望在div中将图像作为背景，并且我希望它在调整浏览器大小时能够响应并像标记内的图像一样缩放。但我在这里做错了，因为我的图像不是全高！它的高度只有80像素。图像为1500 x 650像素。如果我将高度设置为650px，那么它正在工作，但是尽管浏览器窗口较小，它仍具有相同的高度！为解决这个问题提供了一些帮助。

<div id="introContainer">   
<h1>Test</h1>
</div>


#introContainer
{
background-image: url('bilderGuide/bilderLayout/bgStart2.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

Answer 1

使用100％高度。请参阅此JSBin：http://jsbin.com/huloxewo/1/edit?html,css,output

在桌面上的Chrome和Safari上测试。

CSS：

body,html {
  height: 100%;
}

#introContainer
{
    background-image: url('someImage.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100%;
    max-height: 650px;
}

编辑：更新了我的回答以解决评论

Answer 2

它的高度为80px，因为你的“div id =”introContainer“的内容只是那么大（div按内容调整）。也许尝试给你的div一个固定的位置，底部：0px和top：0px;它会根据窗户高度调整。这对我有用：

.coverDiv
{
    position: fixed;
    z-index: 0;
    top: 25px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 0px;
    margin: 0px;
    border-style: none;
    border-width: 0px;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-clip: content-box;
    background-origin: border-box;
    background-image: url('../../Images/Backgrounds/HongKong.jpg');
}

Answer 3

你可以用Jquery做到这一点，很简单。

优势：不需要知道图片的大小

实例：http://jsbin.com/tukodame/1/edit?css,js,output

<强> CSS

#introContainer
{
    background-image: url('http://placehold.it/350x150');
    background-size: cover;
    background-position: center;
    height: 100%;
}

<强> JS

var img = new Image;
img.src = $('#introContainer').css('background-image').replace(/url\(|\)$/ig, "");
var bgImgHeight = img.height;  
$('#introContainer').height(bgImgHeight);

无法显示背景图像的全高？

3 个答案: