Image
Image (이미지)
이미지 로딩에 몇 초가 걸리거나(또는 아예 로딩되지 않거나) 할 수 있기 때문에, image 컨테이너를 사용해서 정확한 크기의 컨테이너를 지정하면 이미지 로딩이나 이미지 오류 때문에 레이아웃이 깨지지 않도록 방지할 수 있어요.
출처: 문서
본문
image 컨테이너를 사용하면 이미지가 로딩되는 몇 초 동안이나, 이미지 오류가 났을 때도 레이아웃이 깨지지 않도록 정확한 크기의 컨테이너를 지정할 수 있어요.
Example
<figure class="image is-128x128">
<img src="https://bulma.io/assets/images/placeholders/128x128.png" />
</figure>
고정된 정사각형 이미지
아바타(avatar)를 만들 때 유용한 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 클래스를 사용하면 둥근 이미지도 만들 수 있어요.
Example
<figure class="image is-128x128">
<img class="is-rounded" src="https://bulma.io/assets/images/placeholders/128x128.png" />
</figure>
레티나(Retina) 이미지
이미지가 고정 크기이기 때문에, 네 배 크기의 이미지를 사용할 수 있어요. 예를 들어 128x128 컨테이너에는 256x256 이미지를 넣되 128x128 픽셀로 줄여서 표시할 수 있어요.
Example
<figure class="image is-128x128">
<img src="https://bulma.io/assets/images/placeholders/256x256.png" />
</figure>
비율로 만드는 반응형 이미지
정확한 크기를 모르고 비율(ratio)만 안다면, 16가지 비율 수정자(modifier)를 사용할 수 있어요. 여기에는 정지 사진에서 흔히 쓰는 종횡비들이 포함돼요.
| 클래스 | 비율 |
|---|---|
image is-square |
Square (or 1 by 1) |
image is-1by1 |
1 by 1 |
image is-5by4 |
5 by 4 |
image is-4by3 |
4 by 3 |
image is-3by2 |
3 by 2 |
image is-5by3 |
5 by 3 |
image is-16by9 |
16 by 9 |
image is-2by1 |
2 by 1 |
image is-3by1 |
3 by 1 |
image is-4by5 |
4 by 5 |
image is-3by4 |
3 by 4 |
image is-2by3 |
2 by 3 |
image is-3by5 |
3 by 5 |
image is-9by16 |
9 by 16 |
image is-1by2 |
1 by 2 |
image is-1by3 |
1 by 3 |
유일한 요구사항은 부모 요소가 이미 특정한 너비를 가지고 있어야 한다는 점이에요.
image 컨테이너는 보통 완벽한 비율을 유지하면서 전체 너비를 차지해요.
그렇게 되지 않는다면 is-fullwidth 수정자를 붙여서 강제할 수 있어요.
어떤 요소에든 적용하는 임의 비율
img가 아닌 다른 요소에도 특정 비율을 적용할 수 있어요. 크기를 조절할 수 있는 요소에 has-ratio 수정자를 붙이면 돼요.
예를 들어 iframe에 16by9 비율을 적용할 수 있어요. 브라우저 크기를 조절하면 비율이 유지되는 것을 볼 수 있어요.
Example
<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>
Sass 변수
| Sass Variable | Value |
|---|---|
$dimensions |
16 24 32 48 64 96 128 |