Question

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

边框会显示底部的空隙，我不想表示..

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

感谢所有人的期待

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中，并删除了其中的图片元素。

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

Answer 2

图像不高。如果你给它height: auto，它会保持比例，这通常是期望的。

如果您将其设置为高度：100％，则会失真，或者（如果您将宽度设置为“自动”）切断两侧。

一种可能性是将图像定义为其容器的背景图像，并在其上使用background-size: cover; background-position: center; Background-repeat: no-repeat;。但这会切断图像的某些部分。

如果您使用background-size: contain;，则会再次获得完整图像，但在侧面或顶部和底部都有一些空间。

Answer 3

您已定义此类型

.about-content img {
    max-width: 100%;
    height: auto;
}

强制浏览器保持图像宽高比。

使用具有正确宽高比的图像或更改img元素的样式。

Answer 4

css第14行有一点变化。将max-width: 100%;更改为max-width: auto; height:auto更改为height:100%＆amp; 这是您的代码在您的CSS中进行更改，它将起作用。：

.about-content-wrapper {
    margin: 2em 0 5em;
    display: flex;
    flex-wrap: wrap;
    padding: 0 1em;
    border:1px solid #ccc;
}
.about-content {
    box-sizing: border-box;
    min-width: 200px;
    max-width: calc(50% - 2em);
}
.about-content img {
    max-width: none;
    height: 100%;
}
.about-content h2,
.about-content p {
    margin: 0 1em 0 1em;
}

Answer 5

img标签默认情况下是内联阻止的，因此您需要这样的内容：

.about-content img {
    display: block; /* remove extra space below image */
    max-width: 100%;
    height: 100%;
}

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

5 个答案: