Images
Images (이미지)
이미지를 반응형으로 동작하게 하고(부모보다 넓어지지 않게) 가벼운 스타일을 더하는 방법을 클래스만으로 다루는 문서와 예시입니다.
출처: 문서
본문
반응형 이미지 (Responsive images)
Bootstrap의 이미지는 .img-fluid로 반응형으로 만듭니다. 이 클래스는 이미지에 max-width: 100%;와 height: auto;를 적용해서 부모의 너비에 맞게 스케일되게 해 줍니다.
<img src="..." class="img-fluid" alt="...">
이미지 썸네일 (Image thumbnails)
border-radius 유틸리티에 더해, .img-thumbnail을 사용하면 이미지에 1px의 둥근 테두리 모양을 줄 수 있습니다.
<img src="..." class="img-thumbnail" alt="...">
이미지 정렬 (Aligning images)
이미지는 플로트 헬퍼 클래스나 텍스트 정렬 클래스로 정렬할 수 있습니다. block 레벨 이미지는 .mx-auto 마진 유틸리티 클래스로 가운데 정렬할 수 있습니다.
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
Picture
특정 <img>를 위해 여러 <source> 요소를 지정하려고 <picture> 요소를 사용한다면, .img-* 클래스는 <picture> 태그가 아니라 <img>에 추가해야 합니다.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
CSS
Sass 변수
이미지 썸네일에 사용할 수 있는 변수들입니다.
$thumbnail-padding: .25rem;
$thumbnail-bg: var(--#{$prefix}body-bg);
$thumbnail-border-width: var(--#{$prefix}border-width);
$thumbnail-border-color: var(--#{$prefix}border-color);
$thumbnail-border-radius: var(--#{$prefix}border-radius);
$thumbnail-box-shadow: var(--#{$prefix}box-shadow-sm);