تصميم موقع شبكي مسبق التكيف - الصور

استخدام خاصية width

إذا width عند تعيين خاصية الحجم إلى بالمئة، وتعيين الارتفاع إلى "auto"، فإن الصورة ستتكيف لتكبيرها أو تقليلها:

مثال

img {
  width: 100%;
  height: auto;
}

جربها بنفسك

لاحظ أن في المثال السابق، يمكن أن يتم تكبير الصورة إلى حجم أكبر من حجمها الأصلي. في معظم الحالات، أفضل حل هو تغييره إلى استخدام max-width الخصائص.

استخدام خاصية max-width

إذا تم تعيين خاصية max-width إلى 100 في المئة، فإن الصورة ستقلل من حجمها حسب الحاجة ولكن لن تزيد عن حجمها الأصلي:

مثال

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

جربها بنفسك

إضافة صورة إلى الصفحة المثيلة

مثال

img {
  width: 100%;
  height: auto;
}

جربها بنفسك

صورة الخلفية

يمكن أن يستجيب الصورة الخلفية أيضًا للتغيير في الحجم والتكبير

هذه هي الطرق الثلاث التي نعرضها:

1. إذا كان background-size عند تعيين الخصائص إلى "contain"، يتم تقليل وتكبير الصورة لتناسب منطقة المحتوى. ولكن يجب أن تبقى الصورة بحجمها الأصلي (نسبة العرض إلى الارتفاع):

هذا هو رمز CSS:

مثال

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

جربها بنفسك

2. إذا تم background-size إذا تم تعيين الخاصية إلى "100% 100%"، فإن صورة الخلفية ستتمدد لتغطي منطقة المحتوى بالكامل:

هذا هو رمز CSS:

مثال

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

جربها بنفسك

3. إذا background-size إذا تم تعيين الخاصية إلى "cover"، فإن صورة الخلفية ستكبر لتغطي منطقة المحتوى بالكامل. لاحظ أن قيمة "cover" تؤدي إلى الحفاظ على نسبة الأبعاد، وقد تؤدي إلى قطع جزء من صورة الخلفية:

هذا هو رمز CSS:

مثال

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

جربها بنفسك

إعداد صور مختلفة للأجهزة المختلفة

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

هذه صورة كبيرة وصغيرة، ستعرض على أجهزة مختلفة:

مثال

/* لأجهزة عرض أقل من 400 بكسل عرض: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* لأجهزة عرض 400 بكسل أو أكبر عرض: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

جربها بنفسك

يمكنك استخدام استعلامات الوسائط min-device-width بدلاً من min-width لتحقق من عرض الجهاز بدلاً من عرض المتصفح. ثم، عند تعديل حجم نافذة المتصفح، لن تتغير الصورة:

مثال

/* لأجهزة عرض أقل من 400 بكسل: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* لأجهزة عرض 400 بكسل وأكبر: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

جربها بنفسك

عنصر <picture> في HTML5

تم إدخال <picture> العنصر، والذي يمكنه تعريف مجموعة من الصور.

دعم المتصفح

38.0 13 38.0 9.1 25.0

<picture> يشتغل عنصر <video> و <audio> العناصر. لقد قمنا بضبط المصادر المختلفة، وأول مصدر يأخذ الأولوية هو المصدر المستخدم حاليًا:

مثال

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

جربها بنفسك

srcset الخصائص ضرورية، وتحدد مصدر الصورة.

media الخصائص اختيارية، وتقبل قاعدة @media CSS فيها استعلام الإعلام.

إشارة:يجب أن تكون قد أضفتها <picture> تعريف المتصفح للعنصر <img> العنصر.