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

Question

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

以下是HTML。 “第二面板”是主要包装，具有建筑物的背景图像。每个“菱形”图像使用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" alt="Furniture" />
            <img class="second-panel-diamond" src="images/automobile-min.png" alt="Automobile" />
            <img class="second-panel-diamond" src="images/jewelry-min.png" alt="Jewelry" />
            <img class="second-panel-diamond" src="images/antique-min.png" alt="Antique" />
        </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;
}

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

在缩小图像时是否有任何方法可以保持这种形成，或者我是否只需要为较小的屏幕重新设计它？

Answer 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;
    }
}

Answer 2

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