CSS

CSS Image Responsive
الصور المتجاوبة مع جميع الأجهزة في لغة CSS

سوف تتعلم في هذا الدرس responsive images الصور المتجاوبة وهي الصور التي تتلائم مع جميع حجم الشاشات أو الأجهزة في لغة CSS.

التاريخ

06 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1444

المواضيع

24
الشروحات chevron_left CSS Image Responsive chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Image Responsive
الصور المتجاوبة مع جميع الأجهزة في لغة CSS

</> CSS Image Responsive
الصور المتجاوبة مع جميع الأجهزة في لغة CSS

 الصورة تكون متجاوبة في حالة كان العرض بالنسبة المئوية 100% مع الطول auto وتكبر وتصغر الصورة مع حجم النافذة لا تنسي تصغير وتكبير حجم النافدة لتلاحظ حجم الصورة عندما يتغير مع حجم الشاشة.

CSS Image Responsive
img 
{
  width: 100%;
  height: auto;
}

</> CSS Image Responsive max width
الصور المتجاوبة مع max-width في لغة CSS

تكون الصور متجاوبة مع احجام الشاشات المختلفة عن طريق استخدام خاصية max-width وتعيين قيمتها تساوي "%100 " وفي هذه الحالة سوف يتم تصغير الصورة مع تصغير النافذه حتي لو كانت اصغر من الحجم الاصلي الموجود بداخل خاصية width ولكن لا يمكن يتم تكبير حجمها عن الحجم الموجود داخل خاصية width.

CSS Image Responsive max width
img {
  max-width: 100%;
  height: auto;
}

</> CSS Responsive background image
خلفيات الصورة المتجاوبة في لغة CSS

تكون الخلفيات الصور متجاوبة مع جميع الأجهزة في لغة CSS بثلاث طرق مختلفة:

  1. إذا تم تعيين خاصية background-size مع القيمة contain فسيتم تغيير حجم صورة الخلفية وتكون صورة مناسبة بين الطول والعرض معاً ولكن لا تكون الخلفية بملئ جميع المساحة وتكون خلفية جزئية فقط.
  2. ذا تم تعيين خاصية background-size مع القيمة 100% 100% فسوف تمتد الصورة وتملئ مساحة الطول والعرض ولكن في هذة الحالة قد لا تكون الصورة لائقة لأن العرض لا يكون متناسب مع الطول إلا في حالة واحدة إذا كانت مساحة العنصر بحجم مساحة الخلفية كطول وكعرض.
  3. إذا تم تعيين خاصية background-size مع القيمة cover فستملئ الصورة المساحة بالأكمل ولكن قد تختفي أجزاء من الصورة إذا كان حجم الصورة مختلف عن حجم العنصر.

CSS Responsive background image contain

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

div {
  width: 100%;
  height: 400px;
  background-image: url('https://www.closetag.com/images/paris.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}
CSS Responsive background image percentage

خاصية background-size مع القيمة %100 %100 تتمتد صورة الخلفية لتغطي منطقة المحتوى بأكملها.

div {
  width: 100%;
  height: 400px;
  background-image: url('https://www.closetag.com/images/paris.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}
CSS Responsive background image cover

خاصية background-size مع cover ،سيتم تغيير حجم صورة الخلفية لتغطية منطقة المحتوى بالكامل.

div {
  width: 100%;
  height: 400px;
  background-image: url('https://www.closetag.com/images/paris.jpg');
  background-size: cover;
  border: 1px solid red;
}

</> CSS Responsive background image different devices
الصورة المتجاوبة في لغة CSS علي أجهزة مختلفة

يمكن أن تكون الصورة الكبيرة مثالية على شاشة الكمبيوتر الكبيرة ، ولكنها غير متناسبة مع الأجهزة الصغيرة, فالحل هو خلفيتين بماقسات مختلفة تظهر خلفية علي أجهزة كبيرة وخلفية أخري علي أجهزة أصغر ويتم ذلك عن طريق media query وهي تبديل الصورة علي الحجم المناسب للأجهزة الصغيرة.

CSS Responsive background image different devices

سوف تتغير الصورة عندما يكون حجم الشاشة أصغر من 400px قم بتصغير نافذة المتصفح لأقل من 400 وشاهد تغيير الصورة الأصلية إلي صورة أخري.

body {
  background-repeat: no-repeat;
  background-image: url('https://www.closetag.com/images/paris.jpg'); 
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
  body { 
     background-image: url('https://www.closetag.com/images/photo1.jpg'); 
  }

</> CSS image different devices with html
الصورة المتجاوبة بواسطة HTML و CSS معاً

عن طريق عنصر picture في لغة  HTML يمكن أن يتم تغيير الصور تلقائياً مع إختلاف الأجهزة وذلك عن طريق إضافة أكثر من مصدر للصورة بداخل عنصر  picture تكون مجموعة عناصر source وعن طريق media يتم لتبديل بينهم.

CSS image different devices with html

تتغير الصورة عندما يتم إضافة خاصية media إلي العنصر source بداخل ملف HTML.

<picture>
  <source srcset="https://www.closetag.com/images/photo4.jpg media="(max-width: 400px)">
  <source srcset="https://www.closetag.com/images/photo4.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
مصطلحات الدرس
Image
Image

صورة

Responsive
Responsive

متجاوب

Images
Images

صور

Width
Width

عرض

Height
Height

ارتفاع

Auto
Auto

آلي

Example
Example

مثال

Background
Background

خلفية

Contain
Contain

تحتوي / إحتواء

Size
Size

حجم

Cover
Cover

تغطية / يغطي

Different
Different

مختلف

Devices
Devices

أجهزة

Media
Media

وسائط

Element
Element

عناصر

اختصارات الدرس
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
Min
Min

Minimum

حد أدني
Max
Max

Maximum

حد أقصي
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

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