gpt4 book ai didi

html - 如果元素移动到新行则调整元素大小

转载 作者:搜寻专家 更新时间:2023-10-31 08:25:25 24 4
gpt4 key购买 nike

关于 http://www.rosstheexplorer.com/picture-test/我有两张并排的图片。两个图像具有不同的高宽比。我希望两个图像具有相同的高度,所以给图像不同的宽度。我使用 padding bottom hack 让图像的高度和宽度始终保持比例。

为此,我在 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' 语句,因为我希望两个图像在移动设备上显示时彼此重叠。当图像在移动设备上并排显示时,图像太小了。

当图像彼此重叠时,它们的宽度为 172 像素,但移动浏览器的宽度可能大于 172 像素。我不想在移动浏览器上有空白。当两个图像移动到不同的行时,我如何指示图像占据设备的整个宽度。

谢谢

最佳答案

这是因为你在这里定义了宽度为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;
}
}

关于html - 如果元素移动到新行则调整元素大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38550386/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com