CSSのバナー画像は親要素を超えて拡大縮小しません

Question

サイトのtypcialバナー画像のスタイルを設定しようとしています。狭いビューポートでは縦の高さが維持され、画像は実質的に同じサイズを維持します親要素は水平方向に移動します。 （これはかなり典型的なバナー画像の動作だと思いますが、私が間違っている場合は私を修正してください）。 （ブラウザのターゲットはie10以上です）。下の例では、画像の比率と100％の幅が誤って保持されているため、親の高さと一致しない場合があります。

現在のHTMLは、divタグの内部だけIMG

<div class="banner"> 
<img class="img-fluid" src="somepic.jpg" /> 
</div> 

使用CSSクラスである

ある：

.banner { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    height: 780px; 
} 

とIMG-流体

とブートストラップ（4）クラス

img-fluid { 
    max-width: 100%; 
    height: auto; 
} 

Answer 1

代わりに背景画像を使用して、異なる結果を達成するために使用できる興味深い行動がいくつかあります。ここで

が私の感想です：

.banner { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    height: 780px; 
    background-image:url('somepic.jpg'); 
    background-size:cover; 
} 

ここで重要なのは、それは画像がその比率を維持しながら、完全な幅と高さをカバーするために広がっていることを確認し、background-size:cover;です。それは、非常に広いスクリーンでは、それが大きくなり、ある程度の高さを削ることを意味します。しかし、より薄い解像度では、望ましい出力が得られます。