当视图较小时如何堆叠两个内嵌图像？

我试图让两个内联图像堆栈随着窗口大小变小。但是，我尝试了几件事，但没有运气。什么是实现这一目标的最佳方式？这里是我的代码，我的工作：当视图较小时如何堆叠两个内嵌图像？

<div class="coming"> 
    <div class="logos"> 
     <img src="appstore.png" class="img-responsive"> 
    </div> 
    <div class="logos"> 
     <img src="googleplay.png" class="img-responsive"> 
    </div> 
</div>

以及相应的CSS：

.coming { 
    width: 100%; 
    height: 20%; 
    overflow: hidden; 
    text-align: center; 
} 

.logos { 
    display: inline-block; 
    margin-top: 2.5%; 
}

这是他们的样子在一个正常的窗口，但我希望他们堆在一个顶部另一个更小。

来源

2016-07-26 mur7ay

媒体查询... –

除非您正在讨论您希望发生的_specific_视口大小，否则您的示例都已准备好您所描述的行为。 – vanburen

谢谢你们。我喜欢进入媒体查询，并将在未来考虑到这一点。 @vanburen - 我从你的评论中发现，除了向班级添加容器液之外，没有什么必须改变。 – mur7ay

我能够这样做是为了得到它：

<div class="coming"> 
    <div class="apple_logo container-fluid"> 
     <img src="appstore.png" class="img-responsive"> 
    </div> 
    <div class="apple_logo container-fluid"> 
     <img src="googleplay.png" class="img-responsive"> 
    </div> 
</div>

所以我只是说'container-fluid'每个DIV类。

来源

2016-07-26 15:03:00 mur7ay

您可能想要举例说明'容器流体'的作用，如果您使用的框架也声明除了使用标签之外，让其他用户更清楚地发现这个问题。 –

当视图较小时如何堆叠两个内嵌图像？

回答

相关问题