تصویر

بخشی برای تصاویر ریسپانسیو

Colors No
Sizes No
Variables Yes

از آنجا که بارگیری تصاویر ممکن است چند ثانیه طول بکشد (یا به هیچ وجه طول نمی کشد)، از بخش image برای تعیین یک بخش به اندازه دقیق استفاده کنید طرح شما به دلیل بارگذاری تصویر یا خطاهای تصویر خراب نشود.


<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/128x128.png">
</figure>
        

تصاویر مربع ثابت #

7 ابعاد برای انتخاب وجود دارد که برای آواتارها مفید است:

image is-16x16
16x16px
image is-24x24
24x24px
image is-32x32
32x32px
image is-48x48
48x48px
image is-64x64
64x64px
image is-96x96
96x96px
image is-128x128
128x128px

تصاویر گرد شده #

همچنین می توانید با استفاده از کلاس is-rounded تصاویر گرد کنید:

You can also make rounded images, using is-rounded class:


<figure class="image is-128x128">
  <img class="is-rounded" src="https://bulma.io/images/placeholders/128x128.png">
</figure>
        

تصاویر رتینا #

از آنجا که اندازه تصویر ثابت است ، می توانید از تصویری چهار برابر بزرگتر استفاده کنید. بنابراین به عنوان مثال، در یک بخش 128x128 ،می توانید از تصویر 256x256 استفاده کنید، اما اندازه آن را به 128x128 پیکسل تغییر دهید.


<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/256x256.png">
</figure>
        

تصاویر ریسپانسیو با نسبت ها #

اگر ابعاد دقیق را نمی دانید اما به جای آن نسبت را می دانید، می توانید از یکی از 16 کلاس اصلاح کننده نسبت استفاده کنید که شامل نسبتهای معمول در عکاسی ثابت هستند :

image is-square
مربع (یا 1 * 1)
image is-1by1
1 * 1
image is-5by4
5 * 4
image is-4by3
4 * 3
image is-3by2
3 * 2
image is-5by3
5 * 3
image is-16by9
16 * 9
image is-2by1
2 * 1
image is-3by1
3 * 1
image is-4by5
4 * 5
image is-3by4
3 * 4
image is-2by3
2 * 3
image is-3by5
3 * 5
image is-9by16
9 * 16
image is-1by2
1 * 2
image is-1by3
1 * 3

بخش image معمولاً ضمن حفظ نسبت کامل ، کل عرض را اشغال می کند. اگر اینگونه نباشد ، می توانید با ضمیمه کردن کلاس اصلاح کننده is-fullwidth این کار را انجتم دهید. The image container will usually take up the whole width while maintaining the perfect ratio.
If it doesn't, you can force it by appending the is-fullwidth modifier.


نسبت های دلخواه با هر المان #

Since 0.7.4

به سادگی با اعمال کلاس اصلاح کننده has-ratio به یک عنصر قابل تغییر، می توانید نسبت خاصی را روی هر المان دیگری غیر از img اعمال کنید.

به عنوان مثال ، می توانید نسبت 16by9 را بر روی iframe را تغییر دهید،اعمال کنید.اندازه مرورگر ، خواهید دید که چگونه نسبت حفظ می شود.


<figure class="image is-16by9">
  <iframe class="has-ratio" width="640" height="360" src="https://www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
</figure>
        

متغیرها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار ماسبه شده
نام نوع مقدار پیش فرض مقدار ماسبه شده
$dimensions string 16 24 32 48 64 96 128