Div 标签响应（高度）里面的图片

Question

我通常是响应式网页设计的新手，正在尝试制作一个视频网站模板。当我在 div 标签中使波浪图形响应时，宽度工作得很好。然而，高度在图像（好像高度不响应宽度上的基础）和 div 标签之间留下间隙，并显示 'wave1' div 的背景颜色为红色。

您可以在 jsFiddle 上以任何屏幕尺寸在此处看到它。

知道如何解决这个问题吗？？？

这是我的代码：

<div id="wave1">
    <img src="images/wave1.jpg" alt="wave 1">
</div><!--wave1-->

#wave1 {
    background-color:#C31619;
    width: 100%;
    height: inherit;
    padding: 0;
    margin: 0;
}

#wave1 img {
    width: 100% 
}

Answer 1

波浪div的红底与视频之间的差距是由您"outer"div上的填充造成的。你有：

.outer {
  padding-top: 1%;
...
}

要删除间隙，请删除该填充。

https://jsfiddle.net/oxn6zLar/

Answer 2

您看到的红线是呈现为文本的标记之间的 space，因此在文档流中占据了相当于单个字符的 space。只需将容器上的 font-size 设置为 0，然后在 children

上设置为 1rem（根元素前面大小的值）

(Demo)

#wave1 {
  background-color: #C31619;
  width: 100%;
  height: inherit;
  padding: 0;
  margin: 0;
  font-size: 0;
}
#wave1 * {
  font-size: 1rem;
}

Answer 3

我已经玩了一段时间了，但我真的看不出为什么会发生这种情况。

给予

#wave1 { margin-bottom:-4px; }

有效，但肯定不是最佳解决方案，因为差距不是由保证金造成的，将来可能会再次突破。

Answer 4

不需要 height: inherit 行。

尝试将 display: block 添加到您的 img 的 css。

HTML img 标签的默认显示值是内联的，这意味着图像与文本内联呈现，并被赋予 line-height 值，这会导致空白 space显示在图像下方（由于图像高度和行高之间的差异）。

另一种解决方法是在 img 元素上设置 vertical-align: bottom，这样行高和图像高度之间的差异将位于图像的顶部。

Div 标签响应（高度）里面的图片

Div tag respond (height) to image inside it

html

css

responsive-design

responsiveness