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

CSS Image Responsive

جربها بنفسك

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 بثلاث طرق مختلفة:

إذا تم تعيين خاصية background-size مع القيمة contain فسيتم تغيير حجم صورة الخلفية وتكون صورة مناسبة بين الطول والعرض معاً ولكن لا تكون الخلفية بملئ جميع المساحة وتكون خلفية جزئية فقط.
ذا تم تعيين خاصية background-size مع القيمة 100% 100% فسوف تمتد الصورة وتملئ مساحة الطول والعرض ولكن في هذة الحالة قد لا تكون الصورة لائقة لأن العرض لا يكون متناسب مع الطول إلا في حالة واحدة إذا كانت مساحة العنصر بحجم مساحة الخلفية كطول وكعرض.
إذا تم تعيين خاصية 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

صورة

Responsive

متجاوب

Images

صور

Width

عرض

Height

ارتفاع

Auto

آلي

Example

مثال

Background

خلفية

Contain

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

Size

حجم

Cover

تغطية / يغطي

Different

مختلف

Devices

أجهزة

Media

وسائط

Element

عناصر

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

HTML

Hypertext Markup Language

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

link

CSS

Cascading Style Sheets

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

Min

Minimum

حد أدني

Max

Maximum

حد أقصي

معلومات تهمك

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

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

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

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات CSS Image Responsive CSS