How to make an image responsive


١٨-سبتمبر-٢٠٢١
abobaker hilal

ابوبكر هلال

كيف تخلي الصور تكون متجاوبة مشاكل الصور كتيرة وبتكون ذات احجام مختلفة وبتواجه ناس كتيرة مشكلة كيف اخلي الصورة متجاوبة في كافة الشاشات مع الحفاظ علي دقتها وحجمها ان شاءالله في السندوش ده هناخد طريقة بسيطية وسريعة

طيب هشرح بي مثال متعودين نشوفو طوالي اللي هو ال card
دايما بكون فيهو صورة وتحت عنوان ونص او وصف بنكون عايزن نضع الصور في شكل cover والصور ما بتجي كلها بمقاس واحد الموجودة الحل انك بتضع الصورة داخل عنصر وبتديهو مقاسات معينة مثلا طول 200 بكسل وعرض 100 وبتدي الصورة بداخله طول 100 في المئة وعرض كذلك 100 في المئة

الكود مثلا

كود يبين تنسيق صورة معينة
كود يبين تنسيق صورة معينة

وبكون شكل الصورة في البطاقة بكون كده

شكل الصورة داخل البطاقة
شكل الصورة داخل البطاقة

تلاحظ الصورة مش مظبوطة وبايظة وما ماخدة حجمها الطبيعي

طيب عشان نحل المشكلة ده بندي الصورة جو العنصر

max-width:100%; height:inherit; // or auto

الكود

الكود بعد التعديل
الكود بعد التعديل

وشكل الصورة داخل البطاقة هيظبط وتبقي بي حجمها الطبيعي

شكل الصورة بعد التعديل
شكل الصورة بعد التعديل

ده حاجة بسيطة كده

ملخص السندوش

شكل الصورة بعد التعديل
شكل الصورة بعد التعديل