1

ヘッダーに「img」を使用して流動的な背景画像を使用できるかどうかを調べようとしていますが、メニューとページのコンテンツを流動的なサイズ変更でインラインに保ちます。

CSS は次のとおりです。

img#header-wrapper {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
        z-index:10;
}

#content-wrapper {padding-top:266px;float:left;overflow: hidden;border-bottom: 0;position: relative;background-color:white;height: 100%;}

html:

<div id="header-wrapper" class="clearfix">
<img id="header-wrapper" src="/images/new-header.jpg" alt="" />
  </div>
</div>
4

1 に答える 1

1

この読み込みは、絶対配置で必要以上に複雑になりました。必要なのはheight: auto画像だけです。

ライブデモ >

<div class="header">
    <img src="http://www.dev.inside-guides.co.uk/images/new-header.jpg" />
</div>
<div class="nav">
    NAV
</div>​

.header {
    width: 100%;
    margin 0 0 10px 0;
}

.header img {
    width: 100%;
    height: auto;
}

.nav {
    background: red;
    width: 100%;
}
于 2012-10-17T12:14:10.957 に答える