0

我将继续练习 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 图像错误

在此处输入图像描述

4

3 回答 3

2

您需要添加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/

于 2015-01-05T14:09:39.590 回答
1

首先，由于您是通过 CSS 的background-image属性而不是具有属性的img元素来分配图像src，因此您的.MainImage img选择器什么也不做。

至于.MainImage, 样式 ,height和width属性只影响容器元素，不影响背景图像。要设置背景图像大小，请使用以下样式：

.MainImage {
    background-size: 100% auto;
}
于 2015-01-05T14:08:55.773 回答
0

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

在 <head> 我输入了以下代码：

<meta http-equiv="X-UA-Compatible" content="IE=80" />
于 2015-01-05T15:10:18.733 回答