Javascript 让这个div响应

有人能解释一下我如何使用媒体查询使这个部门响应吗？这实际上是一个200像素高的div，上面有赞助商的标志。我希望它是有反应的。目前，徽标是水平显示的，但例如，在移动版本上，它们应该一个叠在另一个上

    <div id="sponsors">
      <a id="about" class="smooth"></a>
        <div class="sponsors">
            <div class="row row-centered">
                <div class="col-md-4 col-centered" style="margin-top: 40px; ">
                    <img src="img/bridgestone.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;";>
                </div>
                            <div class="col-md-4 col-centered" style="margin-top: 40px;">
                    <img src="img/sparco1.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;">
                </div>
                            <div class="col-md-4 col-centered" style="margin-top: 10px;">
                    <img src="img/redbull.png" class="hvr-pulse" style=" width: 300px; margin-bottom: 20px;">
                </div>
            </div>
        </div>
    </div>

#sponsors {
    width: 100%;
    height: 200px;
    background-color:  black;
    background-repeat: no-repeat;
    background-size: cover;
    }

#赞助商{
宽度：100%；
高度：200px；
背景色：黑色；
背景重复：无重复；
背景尺寸：封面；
}

您需要添加一个元标记来标识宽度，并在宽度不同时添加媒体查询以执行操作。将百分比添加到css元素而不是像素上也会非常有帮助

HTML:

一个很好的框架可以使用，因为您刚刚开始响应性设计将使用引导，它很容易定制，以适应您的项目需要

---

还有一个很好的网站

将您的

赞助商

高度更改为

最小高度

，如下所示：

#sponsors {
    width: 100%;
    min-height: 200px;
}

链接到JSFIDLE:[虚拟图像使用]

---

---

另外，正如您在小提琴中可能已经注意到的，内联边距被删除，因为您可以通过在包装图像的框中添加一些

填充
来实现您想要的效果。
那么您希望包装图像的黑框在移动视图中相应地扩展其高度？另外，根据您的类名判断，我认为您使用的是引导？使用JSFIDLE或类似工具为问题添加代码示例是一种很好的做法，并让我们知道您尝试了什么，以便我们可以为您指出正确的方向。@Andrew，这正是我想要的。是的，我正在使用Bootstrap。@Luke，还没有尝试过任何关于响应div/wrap的东西。好的，现在我收缩了浏览器，这似乎起作用了。但在正常的显示器宽度视图中，div变得巨大（高度约为700px；）很高兴我能帮助John:）如果这有助于解决您的问题，请将其标记为正确答案。完成。再次感谢你。
@media screen and (min-width:761px){
    div.sponsers{
        background-color:black;
        background-repeat: no-repeat;
        background-size: cover;
    }
}

#sponsors {
    width: 100%;
    min-height: 200px;
}