我有一個垂直和水平居中的div四個圖像。我希望這些圖像在屏幕尺寸允許的情況下與我的div匹配。如果屏幕重新調整大小（或在智能手機上），我想讓前兩個在一條線上，另外兩個在第二條線上。多個響應圖像

行爲應該是這樣的寬屏幕上：

on a wide screen

變成這種緊密的屏幕上：

on a tight screen

我不知道如何得到這個...

我的html：

<div class="wrapper"> 
    <img src="img1.png" class="img-responsive" alt="man1"> 
    <img src="img2.png" class="img-responsive" alt="man2"> 
    <img src="img3.png" class="img-responsive" alt="man3"> 
    <img src="img4.png" class="img-responsive" alt="man4"> 
</div>

和css：

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

.wrapper { 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: 80%; 
    height: 80%; 
    text-align: center; 
} 

.img-responsive { 
    max-height: 100%; 
    width: auto; 
}

JSFiddle

來源

2014-07-06 lbeziaud

你嘗試'顯示：直列block'或'浮動：left' ？ – andrew

是的，但我可能會這樣做的方式不對，我最終會出現一個轉換_3圖像/ 1_，然後在屏幕上顯示兩個圖像，並且必須滾動其他圖標 – lbeziaud

嘗試設置http://jsfiddle.net顯示你的進步，你會得到更多的幫助 – andrew

沒有媒體查詢另一種可能的解決方案：

我增加了一個二級包裝

fiddle

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
.wrapper { 
    margin: 50px auto; 
     width: 80%; 
    background-color: red; 
    text-align: center; 
} 

.insideWrap { 
    display:inline-block 
} 

.img-responsive { 
    max-height: 100%; 
    width: auto; 
}

來源

2014-07-07 00:18:04 andrew

這是一個很好的解決方案，但仍然存在高度問題。如果我將'height：100％;'添加到'.insideWrap'和'height：80％;'添加到'.wrapper'，當4張圖像位於同一行但在較小的屏幕上時，不調整高度我必須滾動。任何想法？ – lbeziaud

可以輕鬆解決TIS與媒體查詢。看一看：Media Queries for Standard Devices

您可以在屏幕寬度小於400像素的情況下按照屏幕尺寸定義圖像。

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

.wrapper { 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    width: 80%; 
    height: 80%; 
    text-align: center; 
} 

.img-responsive { 
    max-height: 100%; 
    width: auto; 
} 


@media screen and (max-width: 500px) { 

.img-responsive{ 
width: 33%; 
} 

}

@JSFiddle

:)

來源

2014-07-06 23:49:19 rafaeldefazio

你真的應該在你的答案中提供一個例子。至於我認爲這是一個評論，沒有更多 – andrew

對不起，提供。 – rafaeldefazio

好的回答+1改進 – andrew

我想你可以做這樣簡單的東西：

@media only screen and (min-width: 768px) { 
.wrapper img {position:relative; float:left; width:25%; height: auto} 
} 

@media only screen and (max-width: 767px) { 
.wrapper img {position:relative; float:left; width:50%; height: auto} 
}

第一部分指出：當屏幕大小超過768px到使每個圖像的寬度包含div的25％，因此可以並排顯示4個圖像。

第二部分說：當屏幕尺寸小於767px時，每幅圖像的寬度爲50％，因此2幅圖像並排顯示。

突破點顯然會根據您的偏好而改變。我針對你的圖片沒有.img-responsive類，但是你可以用.img-responsive替換.wrapper img，如果你願意的話。

來源

2014-07-06 23:57:32 davevsdave

過渡_ #### - > ##/## _完美地完成！謝謝。我仍然必須調整「高度」，以便它始終適合屏幕。 – lbeziaud

多個響應圖像

回答

:)

相關問題