IE11で反応しやすい画像にコンテナの高さを合わせる

Question

したがって、応答性の高い画像が内部にあるコンテナ<div>があります。問題は、コンテナのdivに幅の制限があり、応答する画像の高さに合わせるためです。誰でも私のCSSで必要な変更を提案できますか？以下の私のスニペットで

、あなたは<div>は、画像の高さに合わせていないことを意味している（黒色の背景色が表示されていることを見ることができました

EDIT：。

申し訳ありませんが、私の最初のスニペットこの問題は、単なるIE11である。これは私が持つ問題を抱えているものでなければならない。（私は古いものを削除しました）不完全であった。

.flex-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    max-width: 600px; 
 
    margin-bottom: 8px; 
 
    background-color: black; 
 
} 
 

 
.container img { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="flex-container"> 
 
    <article class="container"> 
 
    <img src="http://placehold.it/800x600"> 
 
    </article> 
 
</div>

Answer 1

vertical-align:top

.container { 
 
    width: 100%; 
 
    max-width: 250px; 
 
    background-color: black; 
 
} 
 

 
.container img { 
 
    max-width: 100%; 
 
    height: auto; 
 
vertical-align:top; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>

Answer 2

<img>が、それはあなたが、それはタグをブロックするために、小さなCSSを使用することができた後、不要なスペースを示しインラインタグで追加し、それが不要に除去するdisplay:blockですスペース

.container { 
 
    width: 100%; 
 
    max-width: 250px; 
 
    background-color: black; 
 
} 
 

 
.container img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>

Answer 3

このようなあなたのイメージのスタイルにdisplay: blockスタイルを追加してください。..

.container { 
 
    width: 100%; 
 
    max-width: 250px; 
 
    background-color: black; 
 
} 
 

 
.container img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
}

<div class="container"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>

Answer 4

.banner { 
    background: url('../images/Banner.jpg') no-repeat center; 
    background-size: -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width: 100%; 
    height: 100%; 
} 

<script> 
$(document).ready(function(){ 
    var w_ht = $(window).height(); 
    $('.banner').css({'height': w_ht}); 
    }); 
</script> 

<div class="banner"></div> 

Answer 5

はその後、高さは右の計算.containerに1pxの最小の高さを追加します。 IE11で

.flex-container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    max-width: 600px; 
 
    margin-bottom: 8px; 
 
    background-color: black; 
 
    min-height:1px; 
 
} 
 

 
.container img { 
 
    display: block; 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="flex-container"> 
 
    <article class="container"> 
 
    <img src="http://placehold.it/800x600"> 
 
    </article> 
 
</div>