html - 全幅背景画像 高さ制限あり

Question

ここのように、全画面の背景画像を取得したいが、高さではなく幅のみ

私は遊んでいますbackground-size:cover;が、それはページ全体をカバーしています-そして、特定の高さをカバーしたいだけです。

Answer 1

heightあなたが言及したサイトは、固定されたおよびを持つ div で標準の背景画像を使用しているだけですwidth: 100%。

たとえば、あなたが言及したサイトは次を使用しています：

header {
   height: 460px;
   margin-top: -69px;
   overflow: hidden;
   padding: 0px;
   width: 100%;
}

コード ブロックの高さに注意してくださいbackground-image: cover。これは、スペースに合わせて背景画像をスケーリングすることを意味します。

Answer 2

だから私は探していたものを見つけました：

CSS:

#header-wrapper{
   top: 0;
   left: 0;
   height: auto;
   position: absolute;
   width: 100%;
}

HTML:

<div id="header-wrapper">
    <img src="image.jpg" width="100%" style="border-bottom:1px solid black;">
</div>

助けてくれてありがとう！