Standardmäßig passt die Komponente ein einzelnes Hintergrundbild an verschiedene Geräte an. Das Hintergrundbild wird mit background-size: cover in CSS festgelegt (weitere Informationen hier: background-size - CSS | MDN).
Standardmäßig wird das verwendete Hintergrundbild so skaliert, dass es immer den gesamten Hintergrund des Containers abdeckt.
Eine Verbesserung könnte darin bestehen, eine alternative mobile Bildoption für diese Komponente hinzuzufügen. Selbst dann müssen einzelne Websites wahrscheinlich CSS für bestimmte Bildschirmbreiten hinzufügen, wenn sie spezifische Anforderungen an Hintergrundbilder haben (dies würde in diesem Fall nicht helfen, da dieses Problem bei breiteren als mobilen Breiten auftritt). Im Fall von Wyze wurde eine angepasste Version der Komponente installiert, um deren spezifische Anforderungen zu unterstützen.
Für die Details der CSS-Änderungen könnte Folgendes das Verhalten des Hintergrundbilds in Ihrem Fall verbessern:
.search-banner .custom-search-banner-wrap {
background-size: contain;
}
Möglicherweise müssen Sie auch unterschiedliche Verhaltensweisen für verschiedene Breiten festlegen, zum Beispiel:
.search-banner .custom-search-banner-wrap {
background-size: contain;
@media screen and (max-width: 1000px) { // wenn der Bildschirm weniger als 1000px breit ist
background: none; // Hintergrund ausblenden
}
}
Wenn Sie neu in diesem Bereich sind, haben wir hier eine Anleitung, die Ihnen helfen könnte: Making custom CSS changes on your site