تصميم ويب سريع الاستجابة - صور
قم بتغيير حجم نافذة المستعرض لترى كيف يتم تحجيم الصورة لتناسب الصفحة.
باستخدام خاصية العرض
إذا widthتم تعيين الخاصية على نسبة مئوية وتم heightتعيين الخاصية على "تلقائي" ، فستكون الصورة سريعة الاستجابة وتتسع لأعلى ولأسفل:
مثال
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تم تعيين الخاصية على "تحتوي على" ، فسيتم تغيير حجم صورة الخلفية ومحاولة احتواء منطقة المحتوى. ومع ذلك ، ستحتفظ الصورة بنسبة العرض إلى الارتفاع (العلاقة التناسبية بين عرض الصورة وارتفاعها):
هذا هو كود 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تم تعيين الخاصية على "غطاء" ، فسيتم تغيير حجم صورة الخلفية لتغطية منطقة المحتوى بالكامل. لاحظ أن قيمة "الغلاف" تحافظ على نسبة العرض إلى الارتفاع ، وقد يتم قطع جزء من صورة الخلفية:
هذا هو كود CSS:
مثال
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-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>مطوري الويب مزيدًا من المرونة في تحديد موارد الصور.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.