تغيير حجم الصور تلقائيًا باستخدام حجم المتصفح باستخدام CSS

تريد تغيير حجم صورك تلقائيًا عند تغيير حجم نافذة المتصفح، ولكن الكود المقدم لا يعمل. فلنبحث عن حل.

لجعل الصور مرنة، ستحتاج إلى إضافة الحد الأقصى للعرض: 100% والارتفاع: تلقائي إليها. ومع ذلك، IE8 لديه خطأ حيث لا يعمل هذا. ولإصلاح هذه المشكلة، أضف width: auto\\9 لـ IE8.

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

سيتم الآن تغيير حجم أي صور تتم إضافتها باستخدام علامة img تلقائيًا.

للتوضيح، إليك مثال JSFiddle الذي لا يتطلب JavaScript. وهو متوافق مع أحدث إصدارات Chrome وFirefox وIE (استنادًا إلى الاختبار).