html - 图片未占据容器的全部高度

我正在创建网站的“关于”部分，并在一些文本之外放置了图像，现在当我缩小屏幕尺寸时，由于某种原因图像没有占据包含的<div>的整个高度。请检查fiddle并帮助我了解原因。

边框会向您显示我不想显示的底部间隙。

请注意，我确实也为该元素连接了 bootstrap ，但本节未使用它。

感谢大家的期待

最佳答案

您已经在图片的父级上设置了min-width和max-width，如下所示:

.about-content {
    box-sizing: border-box;
    min-width: 200px;
    max-width: calc(50% - 2em);
}

删除最小/最大宽度属性即可使用(请注意，我已按照以下方式在CSS中添加了媒体查询):https://jsfiddle.net/m9j61oua/7/

尽管由于我不知道有什么设备这么小而毫无意义，但是您可以将其包装在媒体查询中:

@media (min-width: 201px) {
    .about-content {
        min-width: 200px;
        max-width: calc(50% - 2em);
    }
}

编辑-在下面的评论中，我认为对您来说唯一的前进方法是在第二个div上使用背景图像，这是一个 fiddle :https://jsfiddle.net/m9j61oua/14/

相关CSS:

.about-content.bg-image {
  background-image: url(http://assets.worldwildlife.org/photos/1620/images/carousel_small/bengal-tiger-why-matter_7341043.jpg?1345548942);
  background-size: cover;
  min-height: 200px;
}

我已经将bg-image类添加到第二个div并删除了其中的image元素。

如您所见，它并不是您所要查找的完美解决方案，但是通过正确的图像和一些媒体查询，您应该能够破解它。

关于html - 图片未占据容器的全部高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37275707/