Question

我有一个div，它的响应图像是全宽的。

随着浏览器调整大小，图像和宽度的高度会调整。

我想在这个具有响应图像的div下方放置另一个div。

我似乎无法做对。

这就是我所拥有的：

    <div style="display: block; width: 100% !important; height: auto; display: block; background:      #ffffff; text-align: center;">

    <div style="display: block; min-height: 374px;">
    <img src="yahoo.png" title="THE RESPONSIVE IMAGE" />
    </div>

    <div style="width: 100%; height: 10px; background: #D9594C; position: relative;"></div>
     </div>

您可以看到我想要位于响应式图像下方的div具有背景。

非常感谢你的帮助！

Answer 1

很难说肯定，但我认为这里的高度和响应性存在混淆。

首先，你在图像下面存在巨大差距的原因是因为它的父div设置了min-height: 374px。 div将扩展以适应图像的高度，因此这不是真正需要的。

但是，您还要谈谈调整大小时图像的高度和宽度应该如何调整。要做到这一点，你需要确保图像有width: 100%，所以它只有它的父div一样宽。

我已将您的HTML和CSS分开，并在CSS中添加了评论以尝试和帮助。希望它接近你想要的。

<强> http://jsbin.com/orahuPEh/1/edit

Answer 2

不要给图像div的高度，保持高度：auto，div将取图像高度。当你提到它的响应图像时，div将根据图像高度取高度。

<div style="display: block; height: auto;">

working Demo

Answer 3

如果我理解你的问题，那么你的问题就是你的div没有正确地对抗彼此。这是对的吗？

因为你显然无论如何事情都不一定正常，我首先将img的父div的高度设置为图像的实际高度。如果这不起作用，则在任一div上使用负余量：

div style =“margin-top：-30px;

希望这会有所帮助，请告诉我是否有任何可以澄清的内容。

使用响应图像在Div下方放置一个Div

3 个答案: