Html Can'；是否显示背景图像的全高？

我希望在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;
}

试验
#内部容器
{
背景图片：url（'bilderGuide/bilderLayout/bgStart2.jpg'）；
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
}

使用100%高度。请参见此JSBin：

在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;
}

---

编辑：更新了我的答案以处理评论

它的高度是80px，因为“div id=“introContainer”的内容只有那么大（div根据内容进行调整）。也许可以尝试给你的div一个固定的位置，底部：0px，顶部：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');
}

---

您可以使用Jquery实现这一点，非常简单

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

现场示例：

CSS

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

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

JS

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

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

---

你在什么浏览器中测试它？Mobile Safari在

背景大小：cover

方面有很多问题。你就是在这里遇到问题的吗？@RyanMitchell不，我在使用Firefox。还有其他方法可以在Safari中使用吗？这涵盖了所有屏幕！我只想让它从650px的高度开始，然后在当我调整窗口大小时，高度会变小。@3D kreativ尝试更新的JSBin链接。我已经更新了我的答案。你只需要添加一个

max height

属性。但是高度一直都是相同的！我希望在调整窗口大小时高度会变小。这不可能吗？@3D kreativ当我调整窗口大小时，高度会变小dow，但我没有在Firefox上试用过。你在使用什么操作系统？@3D Krativ刚刚在Firefox上试用过，效果也不错。当我缩小窗口时，图像会缩小，当我放大窗口时，图像不会超过650像素