Html 如果元素移动到新行上,请调整其大小
我有两张并排的照片。这两幅图像的高宽比不同。我希望两个图像具有相同的高度,所以给图像不同的宽度。我使用了填充底部的方法,使图像的高度和宽度始终保持比例 为此,我在CSS文件中添加了以下内容Html 如果元素移动到新行上,请调整其大小,html,css,wordpress,image,Html,Css,Wordpress,Image,我有两张并排的照片。这两幅图像的高宽比不同。我希望两个图像具有相同的高度,所以给图像不同的宽度。我使用了填充底部的方法,使图像的高度和宽度始终保持比例 为此,我在CSS文件中添加了以下内容 .wrapper-133percent-grampians { width: 33.9%; float: left;} .wrapper-75percent-grampians { width: 60.1%; float: left; } .wrapper-133
.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;
}
现在我知道你希望桌面电脑的宽度为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;
}
}