以百分比表示的背景大小就像 iOS 中的裁剪包含一样

Question

这是我的代码：

height: 600px;
width: 100%;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right bottom;
background-image: url(https://someserver.com/image.png);
background-size: 45%;

图像根据屏幕宽度按比例缩小。然而，在某些 iPhone 型号（如 iPhone XR）上，左侧的图片被裁剪：

通过增加

background-size

，我了解了它是如何发生的...首先设备产生

background-size: 100%

并且部分图像从视口中掉出：

然后这张裁剪后的图像被缩小为我的

background-size: 45%

。

出现的第一个解决方案是将较小的图像加载到移动设备的媒体查询中。但不这样做是否可以解决这个问题？

Answer 1

你是对的，这个问题的解决方案之一是为不同的设备提供不同的图像尺寸。如果您想尝试其他解决方案，您可以尝试使用

background-size: cover;

，这将确保背景图像覆盖整个容器，保持其纵横比并在必要时裁剪图像。您还可以尝试结合使用 CSS

transform

和伪元素来帮助制作响应式背景图像。这个线程可能会帮助你。另一种替代方法是使用 Cloudflare、Akamai 或 Cloudinary 等内容交付网络，这将帮助您为不同设备交付响应式图像。 这里是一个可能对您有帮助的链接。