اذهب إلى المحتوى

السؤال

Recommended Posts

  • 1
نشر

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

}

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

  • 1
نشر (معدل)
  • حتى تجعل الصور متناسقة مع مختلف الاجهزة يجب ان يكون ال width الخاص بالصور متغير بحسب عرض شاشة العرض كما في التالي حيث ان ال width هو نسبة من عرض الاب.
img{
width: 100%;   
}
  • اذا كنت تريد تغيير طول الصورة يجب وضع الخصائص كالتالي : 
img{
width: 100%;
height: 400px;
object-fit: cover;
}

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

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

 

تم التعديل في بواسطة عمر قره محمد

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...