如果元素移动到新行，则调整其大小

Posted 2023-03-05

【中文标题】如果元素移动到新行，则调整其大小

【英文标题】：Resize Element If It Moves Onto New Line

【发布时间】：2016-11-27 18:29:36

【问题描述】：

在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"  /></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"  /></div>
</div>

我有 'min:width:172px' 语句，因为我希望这两个图像在移动设备上显示时显示在彼此之上。当图像在移动设备上并排显示时，图像太小了。

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

谢谢

【参考方案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;