انگلیسی
فرانسوی
اسپانیایی
آلمانی
ایتالیایی
نسبت تصویر 1:1
اطمینان حاصل کنید نسبت تصویر 1:1 برای تصاویر با اعمال .image-wrapper و .image-1x1 کلاس ها این یک شکل مربع را برای نمایش تصویر ثابت حفظ می کند.
<div class="image-wrapper image-1x1">
<img src="assets/images/small/img-10.jpg" alt="1x1 Image" class="img-fluid">
</div>نسبت تصویر 4:3
استفاده کنید نسبت تصویر 4:3 برای تصاویر با .image-wrapper .image-4x3 کلاس این کلاس را برای حفظ نسبت 4:3 برای تصاویر و عناصر خود اعمال کنید.
<div class="image-wrapper image-4x3">
<img src="assets/images/small/img-2.jpg" alt="4x3 Image" class="img-fluid">
</div>نسبت تصویر 3:2
استفاده کنید نسبت تصویر 3:2 با اعمال .image-wrapper .image-3x2 کلاس به عناصر شما این اطمینان می دهد که تصاویر و محتوای شما نسبت 3:2 را حفظ می کنند.
<div class="image-wrapper image-3x2">
<img src="assets/images/small/img-3.jpg" alt="3x2 Image" class="img-fluid">
</div>نسبت تصویر 16:9
حفظ الف نسبت تصویر 16:9 با استفاده از .image-wrapper .image-16x9 کلاس از این کلاس استفاده کنید تا مطمئن شوید که تصاویر و عناصر شما نسبت 16:9 را حفظ می کنند.
<div class="image-wrapper image-16x9">
<img src="assets/images/small/img-7.jpg" alt="16x9 Image" class="img-fluid">
</div>ارقام
از بوت استرپ استفاده کنید <شکل> جزء برای نمایش تصاویر با شرح. تصویر را در یک بپیچید <شکل> تگ کنید و استفاده کنید <figcaption> برای کپشن زیر عکس
<figure class="figure mb-0">
<img src="assets/images/avatar/avatar-1.jpg" class="figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>تصویر با شعاع
یک شعاع حاشیه به an اضافه کنید تصویر با گرد-* کلاس از این کلاس در <img> برای جلوه گرد تگ کنید.
<div class="text-center">
<img class="img-fluid rounded-5" src="assets/images/avatar/avatar-5.jpg" alt="...">
</div>تراز چپ تصویر
تراز چپ an تصویر با شناور-شروع کلاس در <img> برچسب زدن
<img class="rounded float-start" src="assets/images/avatar/avatar-4.jpg" alt="...">تراز کردن مرکز تصویر
مرکز an تصویر با mx-auto و .d-block بر روی <img> برچسب زدن
<img class="rounded mx-auto d-block" src="assets/images/avatar/avatar-2.jpg" alt="...">تصویر به راست تراز
تراز راست an تصویر با شناور پایان کلاس در <img> برچسب زدن
<img class="rounded float-end" src="assets/images/avatar/avatar-3.jpg" alt="...">تصویر گرد
ایجاد یک تصویر گرد با .قرص گرد کلاس این کلاس را به <img> برچسب برای یک اثر گرد به شکل قرص.
<div class="text-center">
<img class="img-fluid rounded-pill" src="assets/images/avatar/avatar-2.jpg" alt="...">
</div>تصویر بند انگشتی
سبک یک تصویر به عنوان یک تصویر کوچک با .img-thumbnail کلاس این کلاس را به <img> برای یک تصویر حاشیهدار و گرد تگ کنید.
<div class="text-center">
<img class="img-thumbnail" src="assets/images/avatar/avatar-1.jpg" alt="...">
</div>تصویر بند انگشتی گرد
استفاده کنید تصاویر کوچک گرد با .img-thumbnail و .قرص گرد بر روی <img> برچسب زدن
<div class="text-center">
<img class="img-thumbnail rounded-pill" src="assets/images/avatar/avatar-3.jpg" alt="...">
</div>