搜索横幅图片在较小屏幕上被裁剪

开发
2

默认情况下，组件会这样调整单个背景图像以适应不同的设备。背景图像使用 CSS 中的 background-size: cover 进行设置（更多信息请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/background-size）。

因此，默认情况下，背景图像将被调整大小，以始终覆盖容器的整个背景。

可以进行一项增强，为该组件添加一个备用的移动图像，但即使如此，如果各个网站有特定的背景图像要求，它们可能也需要在某些屏幕宽度下添加一些 CSS（在这种情况下无济于事，因为这个问题发生在比移动设备更宽的宽度下）。在 Wyze 的案例中，他们安装了该组件的自定义版本来支持他们的特定需求。

对于进行 CSS 更改的具体细节，类似以下内容可能会改善背景图像在您案例中的行为。

.search-banner .custom-search-banner-wrap {
   background-size: contain;
}

您可能还需要在不同的宽度下设置不同的行为，例如：

.search-banner .custom-search-banner-wrap {
  background-size: contain;
  @media screen and (max-width: 1000px) { // 如果屏幕宽度小于 1000px
   background: none; // 隐藏背景
  }
}

如果您对此不熟悉，我们有一个指南可能会有所帮助：Making custom CSS changes on your site

6 个赞