如何在移動視圖中並排排列2個圖像？

圖像已使用max-width和max-height進行響應，並且還具有float : left。如何在移動視圖中並排排列2個圖像？

使用display : inline-block並不排列它們並排排列，而是排列在頂部和底部，但隨着窗口尺寸的減小，圖像變小。

然而，使用display : flex並排排列它們......但問題是，當我減小窗口大小時，圖像不會變小和溢出。

這樣做的正確方法是什麼？我希望圖像具有相對的寬度和高度，並排排列（僅限2幅圖像），因此它們會根據窗口/視口大小變得更小或更大。

這裏是迄今爲止我嘗試：

HMTL

<div class='w3-container inline' style='position : relative; right : 10px;' > 
<img class='w3-round' style=' float : left; 
position : relative; right : 50px; 
max-width : 200px; max-height : 200px;' src='promo/PROMO PKET.png'/> 
</div>

CSS

.inline { 
display : flex; 
margin-top : 30px; 
padding-right : 50px 
}

aaannd他們看起來是這樣的：

看到圖像是如何裁剪，而不是正確調整...

來源

2016-09-17 Citra45Abadi

使用您的尺寸的百分比，例如width: 50%; max-width: 50%而不是pixeles

來源

2016-09-17 04:15:29

感謝...這解決了它 – Citra45Abadi

您可以利用百分比來保持它們的響應。我真的不推薦所有的浮動東西，用display：inline-block;代替。

.container{text-align:center;} 
.container img{display:inline-block;width:50%;}

工作示例這裏：

來源

2016-09-17 04:19:25 Stix

如何在移動視圖中並排排列2個圖像？

回答

相關問題