صورة التمهيد
في هذا الفصل، سوف نتعلم دعم التمهيد للصورة. يوفر التمهيد ثلاثة يمكن تطبيقها على صورة بسيطة من الدرجة نمط:
- .img مدورة:اضافةالحدود بين دائرة نصف قطرها: 6pxللحصول على شرائح الصورة.
- .img الدائرة:تضيفالحدود بين دائرة نصف قطرها: 50٪لجعل الصورة كاملة تصبح دائرية.
- .img-المصغرة:إضافة بعض الحشو (الحشو) والحدود الرمادي.
النظر في الأمثلة التالية:
أمثلة
على <img SRC = "/wp-content/uploads/2014/06/download.png" الطبقة = "تقريب img و">
على <img SRC = "/wp-content/uploads/2014/06/download.png" الطبقة = "img ودائرة">
على <img SRC = "/wp-content/uploads/2014/06/download.png" الطبقة = "img والمصغرات">
محاولة »
وكانت النتائج على النحو التالي:
على <img> الصف
تتوفر الفئات التالية إلى أي صورة.
| فئة | وصف | أمثلة |
|---|---|---|
| .img مدورة | إضافة شرائح الصورة (IE8 لا يدعم) | محاولة |
| .img الدائرة | وهنا تصبح الصورة دائرية (IE8 لا يدعم) | محاولة |
| .img-المصغرات | الصور المصغرة | محاولة |
| .img متجاوبة | صور المستجيبة (لن مقياس جيد لعنصر الأم) | محاولة |
صورة تستجيب
بواسطة <IMG> العلامة لإضافة طبقة دعم صورة .img تستجيب لجعل التصميم المتجاوب. والصور مقياس جيد لعنصر الأم.
.img المراعية للفئة ماكس العرض: 100٪؛ وارتفاع: السيارات، يتم تطبيق النمط على الصورة: