Muhammed Hacibrahim نشر 26 مايو 2022 أرسل تقرير مشاركة نشر 26 مايو 2022 كيف يمكنني اضافة هذه الصور للقسم في css و تكون متجاوبة مع احجام الشاشات 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 أسامة زيادة نشر 26 مايو 2022 أرسل تقرير مشاركة نشر 26 مايو 2022 يمكنك إنشاء حاوية (div) ووضع الصورتين بهذا الشكل <div> <img class="img-1" src="01.png" height="250" width="250"> <img class="img-2" src="02.png" height="250" width="250"> </div> ومن أجل التجاوبية يمكننا استخدام أحجام الشاشات المختلفة نستخدم @media بهذا الشكل // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // X-Large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } // XX-Large devices (larger desktops, 1400px and up) @media (min-width: 1400px) { ... } في الشاشات الكبيرة بهذا الشكل @media (min-width: 992px) { .img-1 { width: 250px; height: 250px; } .img-2 { width: 250px; height: 250px; } } وفي الشاشات الصغيرة بهذا الشكل @media (min-width: 576px) { .img-1 { width: 150px; height: 150px; } .img-2 { width: 150px; height: 150px; } } في كل حجم من الشاشات سوف يتغير حجم الصور اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 عمر قره محمد نشر 26 مايو 2022 أرسل تقرير مشاركة نشر 26 مايو 2022 (معدل) حتى تجعل الصور متناسقة مع مختلف الاجهزة يجب ان يكون ال width الخاص بالصور متغير بحسب عرض شاشة العرض كما في التالي حيث ان ال width هو نسبة من عرض الاب. img{ width: 100%; } اذا كنت تريد تغيير طول الصورة يجب وضع الخصائص كالتالي : img{ width: 100%; height: 400px; object-fit: cover; } وهذه الطريقة هي المستخدمة في خلفيات القنوات على يوتيوب. اقرا ايضا مقالات متعلقة بالموضوع : تم التعديل في 26 مايو 2022 بواسطة عمر قره محمد اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Muhammed Hacibrahim
كيف يمكنني اضافة هذه الصور للقسم في css و تكون متجاوبة مع احجام الشاشات
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.