Question

我为大中型屏幕设置了背景图像。我有一台触控式Macbook，非常适合。

如果我用鼠标玩耍以缩小窗口（以查看不同分辨率和更少像素的情况），它会完全响应并且看起来不错（它会在图片的右边部分剪裁，但不会缩放））。打开开发人员工具时也一样，Ipad pro版本是半切的，但没有缩放。

但是，当我尝试使用旧的Macbook进入网站时，图像已完全缩放，不再适合屏幕。

我不明白我们的分辨率不同但英寸相同时会有什么区别。而且当我在计算机上玩时，即使像素更少，图像仍保持正确的大小。

如何解决此问题？为什么这样做呢？如果图像在右侧或左侧略有裁切，但我不希望将其放大，那很好。

我已经尝试过-高度：自动，宽度：100vw，背景尺寸：包含（但它太小了）并且不重复...基本上所有使用CSS的东西

background-image: url(/assets/dessin-ba68b8b….png);
background-size: cover;
height: 100vh;

谢谢

Answer 1

当您将cover用作背景时，可以确保同一图像在所有屏幕尺寸上看起来都不完美，因为浏览器需要以不同的尺寸显示它。

要处理此问题，您可能会生成几张图像，每张图像都针对您想要的屏幕尺寸，并使用CSS media queries为每种屏幕尺寸应用适当的图像。