Header 图片不会覆盖页面宽度

Question

我将继续与 HTML 和 CSS 一起练习。我正在尝试使图像与页面同宽，并在 header 下方居中。出于某种原因，当我尝试拉伸它时它不起作用。我的猜测是我还没有遇到过这样做的选项。

CSS

#header {

height: 80px;
background-color: gray;
margin-bottom: 60px;


}

.container {

}

.MainImage {

background-image:url(computers.jpg);
height: 400px;
background-repeat: no-repeat;
width: 100%;

}

.MainImage img {

position: relative;
background-size: cover;

}

HTML

<body>

<div id = "header">
<div class = "nav">

    <!-- container-fluid gives full width container of whole viewport -->

    <div class = "container-fluid">


    <ul id = "nav" class= "text-left">
        <li><a href = "#"><strong>Home</a></li>
        <li><a href = "#">Technologies</a></li>
        <li><a href = "#">Programs</a></li>
        <li><a href = "#">Blog</strong></a></li>
    </ul>

    <ul id = "nav" class = "text-right">
        <li><a href = "#"><strong>Sign Up</a></li>
        <li><a href = "#">Sign In</a></li>
        <li><a href = "#">Contact</strong></a></li>
    </ul>

    </div><!-- end container-fluid-->
</div><!--end nav-->
</div> <!-- end header --> 



<div id = "Main">


    <div class = "MainImage">


    </div>


</div><!--end Main-->



</body>

http://jsfiddle.net/xehu1tg0/

更新：我的 IE 10 图片错误

Answer 1

首先，因为您是通过 CSS 的 background-image 属性而不是 img 元素和 src 属性，您的 .MainImage img 选择器什么都不做。

就 .MainImage 样式而言，height 和 width 属性仅影响容器元素，不影响背景图像。要设置背景图像大小，请使用此样式：

.MainImage {
    background-size: 100% auto;
}

Answer 2

您需要将 background-size: 100% auto; 添加到您的 .MainImage class，如下所示：

.MainImage {
    background-image:url(http://www.onlineuniversities.com/wp-content/uploads/improving-tech-literacy.jpg);
    height: 500px;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
}

height 和 width 属性只影响容器元素，不影响背景图像本身。

100% auto 本质上意味着图像大小应该是其容器宽度的 100%，高度应该随宽度自动缩放（你会看到两个这样的值，第一个几乎总是与x 轴，第二个与 y 轴有关。)

我希望这是有道理的？

示例： http://jsfiddle.net/w1020vu1/

Answer 3

除了提供的答案外，我确定我的 IE 的兼容性可能是个问题。

在我输入了以下代码：

<meta http-equiv="X-UA-Compatible" content="IE=80" />

Header 图片不会覆盖页面宽度

Header Image won't cover page width

html

css

cover

image