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% であり、高さは幅に合わせて自動的にスケーリングされる必要があることを意味します (このような 2 つの値が表示される場合、最初の値はほとんどの場合 x 軸に関連し、2 番目の値は y に関連します)軸。）

それが理にかなっていることを願っていますか？

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

于 2015-01-05T14:09:39.590 に答える
1

まず、プロパティを持つ要素ではbackground-imageなく、CSS のプロパティを介して画像を割り当てているため、セレクターは何もしません。imgsrc.MainImage img

.MainImage、スタイル、heightおよびwidthプロパティがコンテナ要素にのみ影響し、背景画像には影響しません。背景画像のサイズを設定するには、次のスタイルを使用します。

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