الفرق بين المراجعتين لصفحة: «Bootstrap/images»
إضافة عنوان |
لا ملخص تعديل |
||
| سطر 3: | سطر 3: | ||
== الحصول على صوّر متجاوبة == | == الحصول على صوّر متجاوبة == | ||
يُتحصَّل على صور متجاوبة في إطار العمل Bootstrap بالصّنف <code>.img-fluid</code>. تُطبَّق القيمتان <code>max-width: 100%;</code> و <code>height: auto;</code> على الصورة لتتمدّد مع العنصُر الأب.<syntaxhighlight lang="html"> | يُتحصَّل على صور متجاوبة في إطار العمل Bootstrap بالصّنف <code>.img-fluid</code>. تُطبَّق القيمتان <code>[[CSS/max-width|max-width]]: 100%;</code> و <code>[[CSS/height|height]]: auto;</code> على الصورة لتتمدّد مع العنصُر الأب.<syntaxhighlight lang="html"> | ||
<img src="..." class="img-fluid" alt="Responsive image"> | <img src="..." class="img-fluid" alt="Responsive image"> | ||
| سطر 9: | سطر 9: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
===== | ===== صوّر SVG على متصفّح Internet Explorer 10 ===== | ||
تظهر صور SVG التي يُطبَّق عليها الصنف <code>.img-fluid</code> بقياسات غير متناسبة على Internet Explorer 10. أضف القيمة<code> | تظهر صور SVG التي يُطبَّق عليها الصنف <code>.img-fluid</code> بقياسات غير متناسبة على Internet Explorer 10. أضف القيمة<code>[[CSS/width|width]]: 100% \9;</code> عند الاقتضاء لمعالجة هذا المشكل. يؤدّي هذا الترقيع إلى وضع قياسات غير صحيحة على صيغ الصّوّر الأخرى؛ لذا فإن Bootstrap لا يُطبّقه تلقائيًّا. | ||
== الصّوّر المُصغَّرة == | == الصّوّر المُصغَّرة == | ||
يمكن استخدام الصّنف <code>.img-thumbnail</code> لإعطاء صورة إطارًا مُدوَّرًا عند الحوافّ بمقدار | يمكن استخدام الصّنف <code>.img-thumbnail</code> لإعطاء صورة إطارًا مُدوَّرًا عند الحوافّ بمقدار <code>1px</code>؛ كما يمكن الحصول على نفس النتيجة باستخدام [[Bootstrap/borders|أدوات الإطارات]].<syntaxhighlight lang="html"> | ||
<img src="..." alt="..." class="img-thumbnail"> | <img src="..." alt="..." class="img-thumbnail"> | ||
| سطر 39: | سطر 39: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== | == العنصر <code>[[HTML/picture|<picture>]]</code> == | ||
تأكّد عند استخدام العنصُر <code><picture></code> لتحديد | تأكّد عند استخدام العنصُر <code>[[HTML/picture|<picture>]]</code> لتحديد مصادر <code>[[HTML/source|<nowiki><source></nowiki>]]</code> عدّة لصورة (<code>[[HTML/img|<img>]]</code>) مخصوصة، تأكّد من إضافة الأصناف <code>.img-*</code> إلى العنصُر <code>[[HTML/img|<img>]]</code> وليس إلى العنصر <code>[[HTML/picture|<picture>]]</code>.<syntaxhighlight lang="html"> | ||
<picture> | <picture> | ||
<source srcset="..." type="image/svg+xml"> | <source srcset="..." type="image/svg+xml"> | ||
مراجعة 04:53، 22 مارس 2018
تعرَّف على كيفيّة تحسين الصوّر في إطار العمل Bootstrap ليكون سلوكها متجاوبًا (وبالتالي لا تصير الصّورة أبدًا أعرض من العنصُر الأب) وكيفيّة إضافة تنسيقات خفيفة عليها؛ كلّ ذلك باستخدام الأصناف.
الحصول على صوّر متجاوبة
يُتحصَّل على صور متجاوبة في إطار العمل Bootstrap بالصّنف .img-fluid. تُطبَّق القيمتان max-width: 100%; و height: auto; على الصورة لتتمدّد مع العنصُر الأب.
<img src="..." class="img-fluid" alt="Responsive image">
صوّر SVG على متصفّح Internet Explorer 10
تظهر صور SVG التي يُطبَّق عليها الصنف .img-fluid بقياسات غير متناسبة على Internet Explorer 10. أضف القيمةwidth: 100% \9; عند الاقتضاء لمعالجة هذا المشكل. يؤدّي هذا الترقيع إلى وضع قياسات غير صحيحة على صيغ الصّوّر الأخرى؛ لذا فإن Bootstrap لا يُطبّقه تلقائيًّا.
الصّوّر المُصغَّرة
يمكن استخدام الصّنف .img-thumbnail لإعطاء صورة إطارًا مُدوَّرًا عند الحوافّ بمقدار 1px؛ كما يمكن الحصول على نفس النتيجة باستخدام أدوات الإطارات.
<img src="..." alt="..." class="img-thumbnail">
محاذاة الصوّر
استخدم الأصناف المساعدة على التعويم Float أو أصناف محاذاة النّصوص لمحاذاة الصوّر. يمكن توسيط الصوّر على المستوى الكتلي باستخدام الصنف .mx-auto من أدوات التباعد.
- التعويم إلى اليسار أو اليمين
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
- التوسيط
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
العنصر <picture>
تأكّد عند استخدام العنصُر <picture> لتحديد مصادر <source> عدّة لصورة (<img>) مخصوصة، تأكّد من إضافة الأصناف .img-* إلى العنصُر <img> وليس إلى العنصر <picture>.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>