調整元素的大小，如果它移動到新行

Question

在http://www.rosstheexplorer.com/picture-test/我有兩個並排的圖像。這兩個圖像具有不同的高寬比。我希望兩幅圖像具有相同的高度，因此圖像的寬度不同。我使用填充底部黑客來獲取圖像高度和寬度始終保持成比例。

要做到這一點，我添加了以下CSS文件

.wrapper-133percent-grampians { 
    width: 33.9%; 
    float: left;} 


.wrapper-75percent-grampians { 
    width: 60.1%; 
    float: left; 
} 

.wrapper-133percent-grampians .inner { 
    position: relative; 
    padding-bottom: 133%; 
    height: 0; 
} 

.wrapper-75percent-grampians .inner { 
    position: relative; 
    padding-bottom: 75%; 
    height: 0; 
} 

.element-to-stretch-grampians { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

的HTML代碼如下

<div class="wrapper-133percent-grampians" style="min-width: 172px;"> 
<div class="inner"><img class="element-to-stretch-grampians alignleft" src="http://www.rosstheexplorer.com/wp-content/uploads/2016/05/venus-baths-test2-225x300.jpg" alt="venus baths test2" /></div> 
</div> 

<div class="wrapper-75percent-grampians" style="min-width:172px;" > 
<div class="inner"><img class="element-to-stretch-grampians alignnone" src="http://www.rosstheexplorer.com/wp-content/uploads/2016/05/IMGP0038-300x225.jpg" alt="IMGP0038" /></div> 
</div> 

我有「分：寬度：172px」語句，因爲我想要的兩個圖像在移動設備上顯示時彼此重疊顯示。當圖像在移動設備上並排顯示時，圖像太小。

當圖像出現在彼此的頂部時，它們的寬度爲172px，但移動瀏覽器的寬度可能大於172px。我不想在手機瀏覽器上留有空白區域。當兩張圖像移動到不同的線條上時，如何指示圖像佔據設備的整個寬度。

謝謝

Answer 1

這是因爲你所定義的寬度爲這裏33％

.wrapper-133percent-grampians { 
    width: 33.9%; 
    float: left; 
} 

現在我明白了你想要的寬度成爲臺式電腦33％。但是同樣也適用於移動設備。您可以通過定義不同尺寸的不同屏幕尺寸來分開兩者

//for desktop applications 
@media screen and (max-width: 499px) { 
    .wrapper-133percent-grampians { 
     width: 80%; 
     float: left; 
    } 
} 

//for mobile devices 
@media screen and (min-width: 500px) { 
    .wrapper-133percent-grampians { 
     width: 33.9%; 
     float: left; 
    } 
}