86. الصور المرنة و max-width: 100%

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

المشكلة

بشكل افتراضي، سيتم عرض الصورة بحجم البكسل الأصلي الخاص بها. إذا كانت الصورة بعرض 1500 بكسل ولكن حاويتها بعرض 800 بكسل فقط، فستبرز الصورة خارج الحاوية، مما يؤدي لكسر التخطيط.

حل الصور المرنة العالمي

لجعل الصور مرنة، تقوم بتطبيق قاعدتين بسيطتين:

1. max-width: 100%: يضمن ذلك أن الصورة لن تكون أبداً أعرض من حاويتها الأب. إذا انكمش الأب، تنكمش الصورة بشكل متناسب.
2. height: auto: يحافظ هذا على نسبة العرض إلى الارتفاع للصورة. إذا تغير عرض الصورة، يتم ضبط الارتفاع تلقائياً لمنع التشويه.

css /* طبق هذا عالمياً على جميع الصور والوسائط / img, picture, video, canvas, svg { max-width: 100%; height: auto; display: block; / يساعد في إزالة المساحة الصغيرة في الأسفل التي تضيفها المتصفحات غالباً */ }

ملاحظة: بينما تضمن max-width: 100% انكماش الصورة، فإنها لن تتوسع بعد حجم البكسل الأصلي الخاص بها (ما لم يكن للصورة بالفعل أبعاد أصلية أصغر من الحاوية)، مما يمنع التشويش الناتج عن التمدد المفرط.