在
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>
我有’min：width：172px’语句,因为我希望这两个图像在移动设备上显示时显示在彼此之上.当图像在移动设备上并排显示时,图像太小.
当图像彼此叠加时,它们的宽度为172px,但移动浏览器的宽度可能大于172px.我不想在移动浏览器上有空白区域.当两个图像移动到单独的线条上时,如何指示图像占据设备的整个宽度.
谢谢
解决方法
这是因为您在此处将宽度定义为33％
.wrapper-133percent-grampians {
width: 33.9%;
float: left;
}
现在我明白你希望桌面PC的宽度为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;
}
}
