استخدام خاصية العرض (width)
إذا تم ضبط خاصية العرض (width) على نسبة مئوية وتم ضبط خاصية الارتفاع (height) على “auto”، ستصبح الصورة استجابة وتتغير لأعلى ولأسفل:
مثال:
img {
width: 100%;
height: auto;
}
لاحظ أنه في المثال أعلاه، يمكن تكبير الصورة لتكون أكبر من حجمها الأصلي. الحل الأفضل، في كثير من الحالات، هو استخدام خاصية max-width بدلاً من ذلك.
استخدام خاصية الحد الأقصى للعرض (max-width)
إذا تم ضبط خاصية max-width على 100% ، فسيتم تصغير الصورة إذا لزم الأمر، ولكنها لن تكبر أبدًا لتكون أكبر من حجمها الأصلي:
مثال:
img {
max-width: 100%;
height: auto;
}
إضافة صورة إلى مثال صفحة الويب
مثال:
img {
width: 100%;
height: auto;
}
صور الخلفية
يمكن أيضًا أن تستجيب صور الخلفية لإعادة الحجم والتغيير.
سنعرض هنا ثلاث طرق مختلفة:
- استخدام خاصية background-size مع contain:
إذا تم ضبط خاصية background-size على “contain”، فسيتم تغيير حجم صورة الخلفية ومحاولة ملاء منطقة المحتوى. ومع ذلك، ستحافظ الصورة على نسبة العرض إلى الارتفاع الخاصة بها (العلاقة النسبية بين عرض الصورة وارتفاعها).
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
- استخدام خاصية background-size مع 100% 100%:
إذا تم ضبط خاصية background-size على “100% 100%”، فس تمتد صورة الخلفية لتغطية منطقة المحتوى بأكملها.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
- استخدام خاصية background-size مع cover:
إذا تم ضبط خاصية background-size على “cover”، فسيتم تغيير حجم صورة الخلفية لتغطية منطقة المحتوى بأكملها. لاحظ أن قيمة “cover” تحافظ على نسبة العرض إلى الارتفاع، وقد يتم اقتصاص جزء من صورة الخلفية.
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
صور مختلفة لأجهزة مختلفة
يمكن أن تكون الصورة الكبيرة مثالية على شاشة كمبيوتر كبيرة، ولكنها عديمة الفائدة على جهاز صغير. لماذا تحميل صورة كبيرة عندما يتعين عليك تصغيرها على أي حال؟ لتقليل التحميل، أو لأي سبب آخر، يمكنك استخدام استعلامات الوسائط لعرض صور مختلفة على أجهزة مختلفة.
إليك صورة كبيرة وصورة أصغر سيتم عرضها على أجهزة مختلفة:
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
استخدام min-device-width
يمكنك استخدام استعلام الوسائط min-device-width بدلاً من min-width الذي يتحقق من عرض الجهاز بدلاً من عرض المتصفح. بعد ذلك لن تتغير الصورة عند تغيير حجم نافذة المتصفح:
على سبيل المثال:
/* For devices smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
عنصر <HTML <picture
يمنح عنصر HTML <picture> مطوري الويب المزيد من المرونة في تحديد موارد الصور.
الاستخدام الأكثر شيوعًا لعنصر <picture> سيكون للصور المستخدمة في التصميمات الاستجابية. بدلاً من وجود صورة واحدة يتم تكبيرها أو تصغيرها بناءً على عرض النافذة، يمكن تصميم صور متعددة لتملأ نافذة المتصفح بشكل أفضل.
يعمل عنصر <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اختيارية، وتقبل استعلامات الوسائط التي تجدها في قاعدة CSS@media. - يجب عليك أيضًا تعريف عنصر
<img>للمتصفحات التي لا تدعم عنصر<picture>.
