CSS لتخصيص صور المعاينة باحترافية

هل تعاني من ظهور صور المعاينة بأحجام عشوائية أو مشوهة في مدونتك؟ في هذه المقالة، سأشاركك الكود الذي أستخدمه في WowoLabs لضبط أبعاد الصور وجعلها تظهر بشكل متناسق واحترافية.

🌟 مميزات هذا الكود:

• ✅ التحكم في الأبعاد: يضمن عدم تجاوز الصورة لحجم محدد لتبقى المعاينة أنيقة.
• ✅ الحفاظ على الجودة: تضمن ظهور الصورة كاملة دون قص (Crop) عشوائي.
• ✅ التوسط التلقائي: يجعل الصورة دائماً في منتصف المساحة المخصصة لها.
• ✅ التنسيق المنضبط: الصورة لن "تفرش" وتأخذ عرض الصفحة كله بل ستترتب بذكاء.

🛠️ طريقة الاستخدام:

ببساطة، قم بنسخ الكود التالي ووضعه في قسم إضافة CSS داخل إعدادات المظهر بمدونتك:

CSS CODE WowoLabs Exclusive

/* كود ضبط حجم صور المعاينة في الصفحة الرئيسية */
.snippet-thumbnail img {
  width: auto !important;
  max-width: 200px !important; /* يمكنك تعديل الرقم حسب رغبتك */
  height: auto !important;
  max-height: 200px !important;
  display: block !important;
  margin: 10px auto !important;
  object-fit: contain !important;
}

"بإضافة هذه اللمسة البسيطة، ستلاحظ فرقاً كبيراً في سرعة تصفح المستخدم وجمالية الصفحة الرئيسية."