親コンテナのブートストラップで塗りつぶし画像

Question

コンテナ内に表示する1920 x 1300のバナー画像があります。またはジャンボトロンは800pxの高さです。

どのように私はそれも応答するように画像を収めることができ、それもテキストのontopですか？

<div class="container-fluid> 
    <div class="image-container"> 
    <h1>Title</h1> 
    </div> 
</div> 

CSS: 

.image-container{ 
    background-image: url("..images/background.jpg"); 
    background-size: contain; 
    height:800px; 
    width: 100%; 
} 

また、イメージのサイズを変更することをお勧めしますか？

Answer 1

私は、CSSの背景の代わりに<img>というhtmlを使用することをお勧めします。

私はそれをどうやって行うのかJSFiddleを作った。

内部コンテンツを<div class="image-container">の中に設定し、絶対に設定します。

ここにはJSFiddleがあります。