如何通过 css 代码使图像封面在移动设备中响应

Question

mobile/tablet 上的网站预览出现问题。关于移动版，网站主页没有完全响应，主封面（https://mineteams.com）没有显示上面的所有图片，而在演示版中不存在这个问题。

现在请您帮助我们解决这个问题。

PHP代码：

<div class="pth-hero__scene pth-parallax" style="transform: translate3d(0px, 0px, 0px) rotate(0.0001deg); transform-style: preserve-3d; backface-visibility: hidden; pointer-events: none;">

CSS代码：

      div.pth-hero__scene.pth-parallax {
        background:  no-repeat fixed center center / cover rgba(0, 0, 0, 0);
        height: 40%;
        left: 0;
        position: cover;
        top: 10%;
        width: 100%;
      }
    }

Answer 1

如果您想确保背景图片的所有图片也显示在较小的屏幕上，您需要将背景大小设置为：

.pth-hero__background-inner {
 background-size: contain !important;
}

关于您的主页没有完全响应：请更具体。

如何通过 css 代码使图像封面在移动设备中响应

How to make image cover responsive in mobile device by css code

css

responsive-design

responsive-images