html - React - 如何在平板电脑上只显示背景图像的一半，在手机上显示 1/4

Question

目标我有一张背景图片，在计算机或笔记本电脑浏览器上我希望它显示 100% 的宽度，但如果你在平板电脑上垂直切割它我只希望它显示图像的 1/2，如果它是手机我希望它显示如果垂直切割，则为图像的 1/4。

我尝试过的尝试在 CSS 中使用 clip-path 但这会启用我不想要的水平滚动。

On browser should look like this

On Tablet

On Phone

在平板电脑和手机上，图像的其余部分不应通过滚动可见。它应该只允许垂直滚动，而这只是背景。

Answer 1

您可以通过媒体查询和 background-size 属性实现这一点。

/* Default (mobile) */
body {
  background: url(/image/np7c0.png) no-repeat;
  background-size: 400%;
}

/* Tablet and up */
@media only screen and (min-width: 600px) {
  body {
    background-size: 200%;
  }
}

/* Desktop and up */
@media only screen and (min-width: 768px) {
  body {
    background-size: 100%;
  }
}

这是一个演示:https://jsfiddle.net/zxqcgkLp/

---

注意:您可能需要使用断点，具体取决于您的具体需要。这是来自 CSS-Tricks 的有用指南，其中显示了常见的设备断点:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/