كيفية اضافة صورتين للقسم في css

يمكنك إنشاء حاوية (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;
  }

}

في كل حجم من الشاشات سوف يتغير حجم الصور 

• حتى تجعل الصور متناسقة مع مختلف الاجهزة يجب ان يكون ال width الخاص بالصور متغير بحسب عرض شاشة العرض كما في التالي حيث ان ال width هو نسبة من عرض الاب.

img{
width: 100%;   
}

• اذا كنت تريد تغيير طول الصورة يجب وضع الخصائص كالتالي : 

img{
width: 100%;
height: 400px;
object-fit: cover;
}

وهذه الطريقة هي المستخدمة في خلفيات القنوات على يوتيوب.

اقرا ايضا مقالات متعلقة بالموضوع :