Question

我对响应式网页设计一般都很陌生，我正在尝试制作视频网站模板。当我在div标签中使波形图形响应时，宽度完美地起作用。然而，高度在图像之间留下间隙（好像高度不是响应基底而不是宽度）和div标签并且显示“波浪1”的背景颜色为红色。格。

您可以在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

您看到的红线是作为文本呈现的标记之间的空间，因此占用文档流中单个字符的等效空间。只需将容器上的font-size设置为0，然后将子设置为1rem（根元素的前端大小的值）

（Demo）

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

Answer 2

我已经玩了一段时间了，实际上看不出为什么会发生这种情况的理由。

给予

$this->Jobs

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

Answer 3

wave div的红色底部与视频之间的间隙是由“外部”div上的填充引起的。你有：

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

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

https://jsfiddle.net/oxn6zLar/

Answer 4

不需要height: inherit行。

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

HTML img标记的默认显示值是内联的，这意味着图像与文本内联呈现，并且被赋予line-height值，这会导致图像下方的空白区域出现（由于区别图像高度和线高度。）

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

Div标签响应（高度）到其中的图像

4 个答案: