[vBulletin3.8] الحل النهائي لمشكلة تمدد وتشوه الصور في المنتديات – متجاوب بالكامل للكمبيوتر والجوال!

[ناصر]

السلام عليكم ورحمة الله وبركاته 🌸✨
من أكبر المشاكل التي تواجه أصحاب المنتديات والمصممين عند تصفح المواضيع، هي مشكلة الصور العملاقة الذي يضعه الأعضاء في مشاركاتهم، مما يتسبب في تمدد شاشة المنتدى وتشوه الستايل بالكامل، وظهور فراغات ومساحات بيضاء مزعجة عند التصفح من الكمبيوتر، أو خروج الصورة عن إطار الهاتف عند التصفح من الجوال.
اليوم، يسعدني أن أشارككم كود CSS المطور والمدمج الذي يحل هذه المشكلة بشكل جذري وتلقائي؛ حيث يقوم بتصغير الصور الكبيرة وتنسيقها لتتناسب تماماً مع أبعاد الشاشة المتصفح منها (Fit Screen Size) بكل احترافية ونعومة!

🛠️ كود الـ CSS المطور (جاهز للتركيب)

.alt1 div[id^="post_message_"] img,
.postmessage img {
max-width: 100% !important;
width: auto !important;
height: auto !important;
display: inline-block !important;
margin: 15px 0 !important;
}
@media only screen and (max-width: 600px) {
.alt1 div[id^="post_message_"] img,
.postmessage img {
max-width: 100% !important;
display: inline-block !important;
}
}

🌟 مميزات وفكرة عمل هذا الكود

• ملائمة عرض المشاركة بالكامل (Desktop): بفضل ميزة max-width: 100%، ستتمدد الصور الكبيرة لتفرش وتملأ عرض صندوق المشاركة بالكامل وبشكل مريح للعين، دون أن تنحصر في حجم صغير أو تتسبب في ظهور مساحات فارغة مشوهة للستايل.
• تجاوب كامل وتلقائي مع الجوال (Mobile): بمجرد تصفح الموضوع من الهاتف الذكي (الشاشات الأصغر من 600 بكسل)، يتكيف الكود تلقائياً ليجعل الصورة متناسقة تماماً مع أبعاد إطار الجوال دون الخروج عن الحواف أو التسبب في تمدد الشاشة بالعرض.
• الحفاظ على الجودة والأبعاد: استخدام width: auto مع height: auto يضمن الحفاظ على أبعاد الصور الأصلية ونسب الطول والعرض بدقة دون أي تمطيط أو تشويه بصري.

💻 طريقة التركيب في منتداك

كل ما عليك فعله هو الدخول إلى لوحة التحكم AdminCP ➔ ثم الستايلات والقالب ➔ ثم التحكم بالستايلات ➔ اختر الستايل الافتراضي الخاص بالكمبيوتر واضغط على تعاريف CSS الإضافية (Additional CSS)، وقم بلصق الكود في الأسفل تماماً ثم احفظ التعديل.

أتمنى أن يكون هذا الكود مفيداً لترتيب وتنسيق مواضيعكم، وبانتظار آرائكم واستفساراتكم في التعليقات بالأسفل! 🌸✨