CSS调整图像大小，保持队形

Posted 2023-02-19

【中文标题】CSS调整图像大小，保持队形

【英文标题】：CSS Resizing Images, keeping formation

【发布时间】：2016-12-16 22:00:33

【问题描述】：

我有一个图像的形成，如下所示：

以下是 html。 “second-panel”是主要的包装，它具有建筑物的背景图像。每个“菱形”形状的图像都使用 CSS 以像素值进行绝对定位。

 <!-- Second panel -->
    <div id="second-panel" class="parallax-wrapper">
        <div id="second-panel-diamonds">
            <img class="second-panel-diamond" src="images/furniture-min.png"  />
            <img class="second-panel-diamond" src="images/automobile-min.png"  />
            <img class="second-panel-diamond" src="images/jewelry-min.png"  />
            <img class="second-panel-diamond" src="images/antique-min.png"  />
        </div>
        <div class="parallax-panel">
            ...(not relevant)...
        </div>
    </div>

CSS：

#second-panel-diamonds
    position: absolute;
    left: 1%;
    top: -5px;

#second-panel .second-panel-diamond
    position: absolute;
    /* width: 22%; */
    width: auto;
    height: auto;
    max-width: 350px;

.second-panel-diamond:first-child
    top: 250px;
    left: 90px;

.second-panel-diamond:nth-child(2)
    top: 80px;
    left: 260px;

.second-panel-diamond:last-child
    left: 337px;
    top: 337px;

问题在于较小的屏幕尺寸，因为图像显然会开始溢出，因为它们具有固定的宽度和高度。我尝试将它们设置为自动百分比宽度和高度，但是随着它们变小，它们当然会破坏形成。我也尝试使用百分比值设置它们的位置，但根据图像的大小调整和窗口的大小调整，它不能正确缩放。

有什么方法可以在缩小图像的同时保持这种结构，还是我必须为更小的屏幕重新设计它？

【问题讨论】：

您是否考虑过为此使用 SVG？

在使用相对尺寸时定位被打破

@Jonasw 我认为图像在技术上的定位是相同的，但是随着图像尺寸本身变大，它们之间的空间变得更小，并且随着它们变小，空间变得更大.

@NiettheDarkAbsol 不，我没有。不过，我不确定这在这里会有什么优势？

@Jordan Carter：将左、右、上、填充、边距设置为 % 值

【参考方案1】：

是的，使用 CSS @media 查询。对于特定的屏幕尺寸，您只需要减小图像显示的尺寸（您不必使用auto，如果需要，calc(auto - px)）（不要忘记稍后更改每个图像位置）：

@media screen and (max-width: 600px) 
    #second-panel .second-panel-diamond 
        position: absolute;
        width: 50px;
        height: auto;
    


@media screen and (min-width: 601px) 
    #second-panel .second-panel-diamond 
        position: absolute;
        width: 100px;
        height: auto;
    

【讨论】：

我尝试了第二种解决方案，给每个钻石一个宽度：22%，给 #second-panel-diamonds 包装容器一个 122% 的宽度。但是，每个菱形之间的空间不会根据图像的新宽度进行缩放。我想我将不得不使用媒体查询解决方案并继续调整像素位置。

【参考方案2】：

解决此问题的最简单方法是将所有图像合并为一个 PNG 图形，然后将其宽度和高度设置为百分比值。您需要将图像分开吗？

【讨论】：

它们需要分开，因为它们可能需要对每个应用单独的动画。