Question

我有一个750px x 500px图片，需要将其放入1200px x 1000px框中。该图像必须从不同侧面进行裁剪，并且只有一个子集可以缩放到大框。

我已经使用以下代码片段来实现裁剪和调整大小操作。该解决方案基于this问题。

#top-image {
    position: absolute;
    background-image: url(https://via.placeholder.com/750x500);
    background-size: 
        calc(750px * (1200 / (750 - 103 - 105))) 
        calc(500px * (1000 / (500 - 47)));
    background-position: 
        calc(-105px * (1200 / (750 - 103 - 105)))  
        0px;
    filter: brightness(85%);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

下一步是通过向#top-image添加以下行，将简单的视差效果应用于此背景图像：

background-attachment: fixed;

但是，添加上述行会导致裁剪和调整大小后的图像损坏，从而使该图像不同于没有视差效果的图像。

无论是否添加上述行，如何裁剪和调整大小以获取相同的图片？

如何避免由于固定背景附件而导致图像尺寸损坏？

0 个答案: