在窗口調整大小時滾動出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

我認為這是您要尋找的：

工作：DEMO

1）問題是div ＃innerdiv3必須設置為height：auto，以便在屏幕分辨率降低時可以調整其高度。

2）當您完成上述操作后，您會發現並非所有img都位於同一行，即有些下降（但仍在同一div中），所以現在對於div ＃innerdiv3_div img我已將max-height = 10％＆max -width = 10％；

3）現在，通過給div的兩個邊距都設置margin-bottom：20px （您可以隨意更改隨機px）進行最后的觸摸，即＃innerdiv3_div和＃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;
}

Answer 2

您正在#innerdiv3上設置顯式高度。

如果您希望將每行中的圖像數量調整為視口的寬度，並且要使圖像始終占據全角寬度的100％，那么您就是您的朋友。

https://jsfiddle.net/3atxd4uL/10/

將每個img為float: left樣式float: left並設置100％的默認寬度（用於最小的視口）。 然后，對於每個較大的斷點，設置圖像的樣式以使其寬度逐漸變小（1 / 2、1 / 3、1 / 4 ...）：

@media (min-width: 200px) {
  #innerdiv3_div img{
    width: 50%;
  }
}

@media (min-width: 400px) {
  #innerdiv3_div img{
    width: 33.333%;
  }
}

@media (min-width: 600px) {
  #innerdiv3_div img{
    width: 25%;
  }
}