html - 图像在窗口调整大小时滚出 div

Question

https://jsfiddle.net/3atxd4uL/

<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1  col-lg-10 col-lg-offset-1" id="innerdiv3_div">
            <img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/0/0d/Ski_trail_rating_symbol-blue_square.svg" alt="">
            <img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/0/0d/Ski_trail_rating_symbol-blue_square.svg" alt="">
            <img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/0/0d/Ski_trail_rating_symbol-blue_square.svg" alt="">
            <img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/0/0d/Ski_trail_rating_symbol-blue_square.svg" alt="">
            <img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/0/0d/Ski_trail_rating_symbol-blue_square.svg" alt="">
        </div>

我正在尝试创建响应式页面。但在这种情况下，当我调整窗口大小时，图像会浮出容器 div，而不是扩展包含的 div。提前致谢。

Answer 1

我想这就是您要找的:

WORKING:DEMO

1) 问题是 div #innerdiv3 必须被赋予 height:auto 以便它可以在屏幕分辨率降低时调整其高度。

2) 完成上述操作后，您会发现并非所有 img 都在同一行，即有些下降(但仍保留在同一个 div 中)，所以现在对于 div #innerdiv3_div img 我有改变 ma​​x-height = 10% & max-width = 10%;

3) 现在，给两个 div，即 #innerdiv3_div 和 ma​​rgin-bottom:20px(只是随心所欲更改的随机像素)做最后的润色#innerdiv3_div img 从底部留一些空间

CSS

#innerdiv3{
    min-height: 100px;
    width: 100%;
    background-color: ghostwhite;
    height: auto;
    margin: 0 auto;
    margin-bottom:20px;
}
#innerdiv3_div img{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;    
    margin-bottom:20px;
    max-height: 10%;
    max-width: 10%;
    margin-top: 10px;
    margin-left: 20px;
}