باستخدام الخاصية العرض
إذا كان width يتم تعيين الخاصية إلى 100٪، وسوف تكون الصورة استجابة وتحجيم صعودا وهبوطا:
لاحظ أنه في المثال أعلاه، فإن الصورة يمكن زيادتها إلى أن تكون أكبر من حجمها الأصلي. والحل الأفضل، في كثير من الحالات، سوف يكون لاستخدام max-width الملكية بدلا من ذلك.
باستخدام ماكس عرض الملكية
إذا كان max-width يتم تعيين الخاصية إلى 100٪، فإن الصورة يخفضوا إذا كان لديه، ولكن لم تدرج حتى تكون أكبر من حجمها الأصلي:
إضافة صورة إلى صفحة ويب مثال
خلفية الصور
يمكن الصور الخلفية أيضا الاستجابة لتغيير حجم والقياس.
ونحن هنا سوف تظهر ثلاث طرق مختلفة:
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 تعيين الخاصية إلى "cover" ، وصورة الخلفية تحجيم لتغطية منطقة المحتوى بأكملها. لاحظ أن "cover" قيمة تحافظ على نسبة الارتفاع، ويمكن قص جزء من صورة الخلفية:
هنا هو رمز 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');
}
} انها محاولة لنفسك » HTML5 <picture> العنصر
قدم HTML5 و <picture> عنصر، والتي تمكنك من تحديد أكثر من صورة واحدة.
دعم المتصفح
| العنصر | |||||
|---|---|---|---|---|---|
| <picture> | غير معتمد | 38.0 | 38.0 | غير معتمد | 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 .
يجب عليك أيضا تعريف <img> عنصر لالمتصفحات التي لا تدعم <picture> العنصر.