تغيير حجم الصورة لتناسب نافذة المتصفح دون تشويه

يعد تغيير حجم الصورة لتناسب نافذة المتصفح مهمة شائعة مع حلول تبدو بسيطة. ومع ذلك، فإن الالتزام بمتطلبات محددة، مثل الحفاظ على النسب وتجنب الاقتصاص، يمكن أن يشكل تحديات.

الحل بدون أشرطة التمرير وجافا سكريبت (CSS فقط)

يستخدم هذا الحل شبكة CSS للتأكد من أن حاوية الصورة تشغل ارتفاع النافذة بالكامل. يتم بعد ذلك ضبط الصورة لتتناسب أفقيًا وعموديًا داخل تلك الحاوية، مع الحفاظ على نسبة العرض إلى الارتفاع وتجنب إضافة أشرطة التمرير.

الحل باستخدام JQuery

إذا كان Javascript متاحًا ، هناك طريقة أخرى وهي:

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