# 搜索横幅图片在较小屏幕上被裁剪
**URL:** https://meta.discourse.org/t/search-banner-image-cuts-off-on-smaller-screens/273647
**Category:** Development
**Tags:** search-banner
**Created:** [2022年九月6日 09:35 UTC](https://meta.discourse.org/t/search-banner-image-cuts-off-on-smaller-screens/273647 "2022-09-06T09:35:18Z")
**Posts on this page:** 3
**Page:** 1
### Author:  [@Sherran](https://meta.discourse.org/u/Sherran)
#### Post date: [2022年九月6日 09:35 UTC](https://meta.discourse.org/t/search-banner-image-cuts-off-on-smaller-screens/273647/1 "2022-09-06T09:35:18Z")
您好。我安装了官方主题组件：[https://meta.discourse.org/t/search-banner/122939，它很有帮助。只有一件事让我烦恼。我为搜索横幅上传了背景图片，但当屏幕变窄时，它似乎会通过裁剪右侧部分来调整自身。我不知道如何描述，但这里有一些图片：](https://meta.discourse.org/t/search-banner/122939%EF%BC%8C%E5%AE%83%E5%BE%88%E6%9C%89%E5%B8%AE%E5%8A%A9%E3%80%82%E5%8F%AA%E6%9C%89%E4%B8%80%E4%BB%B6%E4%BA%8B%E8%AE%A9%E6%88%91%E7%83%A6%E6%81%BC%E3%80%82%E6%88%91%E4%B8%BA%E6%90%9C%E7%B4%A2%E6%A8%AA%E5%B9%85%E4%B8%8A%E4%BC%A0%E4%BA%86%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%EF%BC%8C%E4%BD%86%E5%BD%93%E5%B1%8F%E5%B9%95%E5%8F%98%E7%AA%84%E6%97%B6%EF%BC%8C%E5%AE%83%E4%BC%BC%E4%B9%8E%E4%BC%9A%E9%80%9A%E8%BF%87%E8%A3%81%E5%89%AA%E5%8F%B3%E4%BE%A7%E9%83%A8%E5%88%86%E6%9D%A5%E8%B0%83%E6%95%B4%E8%87%AA%E8%BA%AB%E3%80%82%E6%88%91%E4%B8%8D%E7%9F%A5%E9%81%93%E5%A6%82%E4%BD%95%E6%8F%8F%E8%BF%B0%EF%BC%8C%E4%BD%86%E8%BF%99%E9%87%8C%E6%9C%89%E4%B8%80%E4%BA%9B%E5%9B%BE%E7%89%87%EF%BC%9A)
看起来不错。
图片覆盖了文字。
而且我发现 [Wyze](https://forums.wyzecam.com/) 的搜索横幅效果很好，因为图片可以从两侧进行调整，而且不会覆盖文字。
这个组件能否改进，以便图片可以适应不同的设备？谢谢！！
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2022年九月6日 13:48 UTC](https://meta.discourse.org/t/search-banner-image-cuts-off-on-smaller-screens/273647/2 "2022-09-06T13:48:16Z")
默认情况下，组件会这样调整单个背景图像以适应不同的设备。背景图像使用 CSS 中的 `background-size: cover` 进行设置（更多信息请参见：[https://developer.mozilla.org/en-US/docs/Web/CSS/background-size）。](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size%EF%BC%89%E3%80%82)
因此，默认情况下，背景图像将被调整大小，以始终覆盖容器的整个背景。
可以进行一项增强，为该组件添加一个备用的移动图像，但即使如此，如果各个网站有特定的背景图像要求，它们可能也需要在某些屏幕宽度下添加一些 CSS（在这种情况下无济于事，因为这个问题发生在比移动设备更宽的宽度下）。在 Wyze 的案例中，他们安装了该组件的自定义版本来支持他们的特定需求。
对于进行 CSS 更改的具体细节，类似以下内容可能会改善背景图像在您案例中的行为。
```scss
.search-banner .custom-search-banner-wrap {
background-size: contain;
}
```
您可能还需要在不同的宽度下设置不同的行为，例如：
```scss
.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](https://meta.discourse.org/t/how-to-make-css-changes-on-your-site/168101)
---
### Author:  [@lindsey](https://meta.discourse.org/u/lindsey)
#### Post date: [2025年十二月22日 14:29 UTC](https://meta.discourse.org/t/search-banner-image-cuts-off-on-smaller-screens/273647/4 "2025-12-22T14:29:02Z")
根据 [Deprecating the Search Banner theme component](https://meta.discourse.org/t/deprecating-the-search-banner-theme-component/379322/) 关闭。