في هذا الدرس 5تصفّح المواضيع
الصورة تكون متجاوبة في حالة كان العرض بالنسبة المئوية 100% مع الطول auto وتكبر وتصغر الصورة مع حجم النافذة لا تنسي تصغير وتكبير حجم النافدة لتلاحظ حجم الصورة عندما يتغير مع حجم الشاشة.
CSS Image Responsive
CSS Image Responsive
تكون الصور متجاوبة مع احجام الشاشات المختلفة عن طريق استخدام خاصية max-width وتعيين قيمتها تساوي "%100 " وفي هذه الحالة سوف يتم تصغير الصورة مع تصغير النافذه حتي لو كانت اصغر من الحجم الاصلي الموجود بداخل خاصية width ولكن لا يمكن يتم تكبير حجمها عن الحجم الموجود داخل خاصية width.
CSS Image Responsive max width
تكون الخلفيات الصور متجاوبة مع جميع الأجهزة في لغة 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;
}يمكن أن تكون الصورة الكبيرة مثالية على شاشة الكمبيوتر الكبيرة ، ولكنها غير متناسبة مع الأجهزة الصغيرة, فالحل هو خلفيتين بماقسات مختلفة تظهر خلفية علي أجهزة كبيرة وخلفية أخري علي أجهزة أصغر ويتم ذلك عن طريق 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');
}عن طريق عنصر 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>سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات15
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Image صورة
- للمراجعة
- 02 Responsive متجاوب
- للمراجعة
- 03 Images صور
- للمراجعة
- 04 Width عرض
- للمراجعة
- 05 Height ارتفاع
- للمراجعة
- 06 Auto آلي
- للمراجعة
- 07 Example مثال
- للمراجعة
- 08 Background خلفية
- للمراجعة
- 09 Contain تحتوي / إحتواء
- للمراجعة
- 10 Size حجم
- للمراجعة
- 11 Cover تغطية / يغطي
- للمراجعة
- 12 Different مختلف
- للمراجعة
- 13 Devices أجهزة
- للمراجعة
- 14 Media وسائط
- للمراجعة
- 15 Element عناصر
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTML HTML
- Hypertext Markup Language
- لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
- للمراجعة
- 02 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
- 03 Min Min
- Minimum
- حد أدني
- للمراجعة
- 04 Max Max
- Maximum
- حد أقصي
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.