图像没有占据容器的整个高度

Question

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

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

请注意，我也为项目连接了引导程序，但我没有在本节中使用它。

感谢大家的期待

Answer 1

您已经在图像的父级上设置了最小宽度和最大宽度，如下所示：

.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 上使用背景图像，这是一个小提琴： 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 并删除了其中的图像元素。

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