Question

所以我有一个容器<div>，里面有一个响应式图像。问题是，容器div有宽度限制，我希望它适合响应图像的高度。任何人都可以在我的CSS中提出我需要的更改吗？

在下面的代码段中，您可以看到黑色背景颜色可见（这意味着<div>不适合图像的高度。

编辑：

抱歉，我的初始代码段不完整（我已删除旧代码段）。这应该是我遇到问题的人。这个问题仅限于IE11。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

添加vertical-align:top

＆＃13;

.container {
  width: 100%;
  max-width: 250px;
  background-color: black;
}

.container img {
  max-width: 100%;
  height: auto;
vertical-align:top;
}

＆＃13;

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

＆＃13;

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

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

Answer 4

请为您的图片样式添加display: block样式..

＆＃13;

.container {
  width: 100%;
  max-width: 250px;
  background-color: black;
}

.container img {
  max-width: 100%;
  height: auto;
  display: block;
}

＆＃13;

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

＆＃13;

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

这是一篇过时的文章，但存在相同的问题，但没有找到以下答案之一，所以here's对我有用。

我只需要向div添加长宽比，其中包含img / imgs。在我的情况下为1920x460px图像，这意味着暗含宽高比

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

希望其他人也可以这样解决他/她的问题！

在IE11中将容器高度调整为响应图像

6 个答案: