Hallo. Ich habe die offizielle Theme-Komponente installiert: Advanced Search Banner und sie ist hilfreich. Nur eine Sache stört mich. Ich habe ein Hintergrundbild für das Suchbanner hochgeladen, aber es scheint sich anzupassen, indem es den rechten Teil abschneidet, wenn der Bildschirm schmaler wird. Ich weiß nicht, wie ich es beschreiben soll, aber hier sind einige Bilder:
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:
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
}
}
