4
在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。我不想在手機瀏覽器上留有空白區域。當兩張圖像移動到不同的線條上時,如何指示圖像佔據設備的整個寬度。
謝謝
非常感謝:) –