使容器高度適合 IE11 中的響應式圖像

Question

所以我有一個容器<div>里面有一個響應圖像。 問題是，容器 div 有寬度限制，我希望它適合響應式圖像的高度。 任何人都可以在我的 CSS 中提出我需要的更改嗎？

在我下面的代碼片段中，您可以看到黑色背景顏色是可見的（這意味着<div>不適合圖像的高度。

編輯：

抱歉，我最初的片段不完整（我已經刪除了舊片段）。 這應該是我遇到的問題。 順便說一下，這個問題僅在 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

將 1px min-height 添加到.container然后在 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>

Answer 4

請像這樣將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 5

.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 6

這是一篇舊文章，但有同樣的問題，並且沒有發現這些答案中的任何一個有用，所以這對我有用。

我只需要將縱橫比添加到包含 img/imgs 的 div。 在我的情況下，1920x460px 圖像，這意味着長寬比為

padding-top: (420/1960)*100%; = 23.958333%;

希望其他人也能像這樣解決他/她的問題！