Question

我正在建设 this landing page 在移动横向模式下，背景图像会在滚动点处被切割。

我该如何修复它以便在滚动页面时看到整个图像？ TNX

Answer 1

您可以使用针对不同分辨率的srcset属性。如果您希望将应用程序定位到所有类型的设备（从大到小），那么使用针对所有分辨率的相同图像是不明智的。

<picture>
  <source srcset="img/extralarge.jpg, img/extralarge.jpg 2x" media="(min-width: 1000px)">
  <source srcset="img/large.jpg, img/large.jpg 2x" media="(min-width: 800px)">
  <source srcset="img/medium.jpg">
  <img srcset="img/medium.jpg" alt="Sample Test">
</picture>

在上面的代码中，我使用了3种不同分辨率的图像。

此外，您还可以使用自适应图像检查网址 http://alistapart.com/article/responsive-images-in-practice

css背景图像在移动横向模式中被切断

1 个答案: