CSS调整图像大小，保持格式

Question

CSS调整图像大小，保持格式

6

我有一组图片，如下所示：

以下是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" 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;
}

问题出在屏幕较小的情况下，图片会溢出，因为它们给定了固定的宽度和高度。我尝试将它们设置为百分比宽度和高度自动调整，但随着它们变得更小，它们自然会破坏形成。我还尝试使用百分比值设置它们的位置，但无法根据图像和窗口的调整来正确缩放。

有没有办法在缩小图片的同时保持这种布局，或者我需要为小屏幕重新设计它？

- Jordan Carter

使用相对大小时，定位是如何分解的？ - Jonas Wilms

@Jonasw 我认为问题在于图像在技术上被定位相同，但随着图像大小本身变大，它们之间的空间变小，而当它们变小时，空间变大。 - Jordan Carter

@TobiasK。我不确定在这里如何使用相对空间。 - Jordan Carter

1

@Jordan Carter：将左、右、上、内边距和外边距设置为百分比值。 - Jonas Wilms

@JordanCarter 我有一个逻辑错误。你可以使用相对间距和Sass。在Sass中，您可以计算元素的相对填充，就像我之前提到的那样。请查看http://sass-lang.com/guide#topic-8 - Tobias S

显示剩余4条评论

2个回答

0

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

- Radek

它们需要分开，因为可能需要对每个应用不同的动画。 - Jordan Carter

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user5066707 · Accepted Answer

是的，可以使用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;
    }
}