بشكل افتراضي، هذه هي الطريقة التي يتعامل بها المكون مع ضبط صورة خلفية واحدة لتناسب الأجهزة المختلفة. يتم تعيين صورة الخلفية باستخدام background-size: cover في CSS (مزيد من المعلومات هنا: background-size - CSS | MDN).
لذلك، بشكل افتراضي، سيتم تغيير حجم صورة الخلفية المستخدمة لتغطية كامل خلفية الحاوية دائمًا.
يمكن إجراء تحسين واحد لإضافة صورة بديلة للجوال إلى هذا المكون، ولكن حتى مع ذلك، من المحتمل أن تضطر المواقع الفردية إلى إضافة بعض 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) { // إذا كانت الشاشة أقل من 1000 بكسل عرضًا
background: none; // إخفاء الخلفية
}
}
إذا كنت جديدًا في هذا، فلدينا دليل قد يساعد: Making custom CSS changes on your site