CSS：コンテンツや固定サイズを持たずに背景画像を表示させますか？

Question

私はこれまで（可視なしヘッダー画像付き）は、このコードを持って：あなたは、ヘッダ画像に248pxの固定サイズを与える場合、あなたはそれが表示され見ることができます

.wrap { 
 
    margin: 50px auto; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-image: url('https://placebear.com/1000/800'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 

 
.header { 
 
    background-image: url('https://placebear.com/940/248'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
}

<div class="wrap"> 
 
    <div class="row"> 
 
    <div class="medium-12 columns header"></div> 
 
    </div> 
 
</div>

。可視ヘッダ画像と例：

.wrap { 
 
    margin: 50px auto; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-image: url('https://placebear.com/1000/800'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 

 
.header { 
 
    background-image: url('https://placebear.com/940/248'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    height: 248px; 
 
    border: 3px solid white; 
 
}

<div class="wrap"> 
 
    <div class="row"> 
 
    <div class="medium-12 columns header"></div> 
 
    </div> 
 
</div>

は、それが一定の高さを使用せずに見えるようにする方法はありますか？

単純なsrc属性とalt属性を持つ古典的なimgタグを使用する場合と似ています。その後、高さは画像ファイル自体から読み出されます。

私はそこに固定された高さを避けたいと思います。画像が変わると間違ってしまうからです。

Answer 1

背景イメージを使用する場合は、高さを定義する必要があると思います。 IMGタグを使用する方がよいとちょうど100％の幅を入れて、そのような可能性があります：

.wrap { 
 
    margin: 50px auto; 
 
} 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background-image: url('https://placebear.com/1000/800'); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
} 
 

 
.header { 
 
    border: 3px solid white; 
 
} 
 

 
img { 
 
    width: 100%; 
 
}

<div class="wrap"> 
 
    <div class="row"> 
 
    <div class="medium-12 columns header"> 
 
     <img src="https://placebear.com/940/248" alt="Bear Image"> 
 
    </div> 
 
    </div> 
 
</div>