Question

我将继续使用HTML和CSS练习。我试图使图像走到页面的宽度，居中在标题下方。出于某种原因，当我尝试拉伸它时，它不会起作用。我的猜测是，我还有一个选项可以实现。

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图像错误

enter image description here

Answer 1

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

.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 2

首先，由于您通过CSS background-image属性分配图像而不是img属性的src元素，因此{{1}选择器什么都不做。

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

width

Answer 3

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

＆lt;头＆gt;我输入了以下代码：

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

页眉图像不会覆盖页面宽度

3 个答案: