مرحباً. لقد قمت بتثبيت المكون الرسمي للقالب: Advanced Search Banner وهو مفيد. هناك شيء واحد فقط يزعجني. لقد قمت بتحميل صورة خلفية لشعار البحث، ولكن يبدو أنها تعدل نفسها عن طريق قص الجزء الأيمن عندما تضيق الشاشة. لا أعرف كيف أصف ذلك ولكن إليك بعض الصور:
تبدو جيدة.
الصورة تغطي النصوص.
وقد وجدت أن شعار البحث الخاص بـ Wyze جيد لأن الصورة تعدل نفسها من كلا الجانبين ولن تغطي النص على أي حال.
هل يمكن تحسين هذا المكون بحيث تتكيف الصورة لتناسب الأجهزة المختلفة؟ شكراً!!
بشكل افتراضي، هذه هي الطريقة التي يتعامل بها المكون مع ضبط صورة خلفية واحدة لتناسب الأجهزة المختلفة. يتم تعيين صورة الخلفية باستخدام 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