이미지

// Images

이미지를 반응형 동작으로 선택하고 (부모보다 커지지 않도록) 클래스를 통해 경량 스타일을 추가하는 문서 및 예시입니다.

반응형 이미지

Bootstrap의 이미지는 .img-fluid를 통해서 반응형으로 만들어집니다. 이렇게 하면 이미지에 max-width: 100%; 및 height: auto;가 적용되어 부모 너비와 함께 크기가 조정됩니다.

html

<img src="..." class="img-fluid" alt="...">

이미지 썸네일

border-radius 유틸리티 유틸리티 외에도, .img-thumbnail을 사용하여 이미지에 둥근 1px 테두리 모양을 제공할 수 있습니다.

html

<img src="..." class="img-thumbnail" alt="...">

이미지 정렬

helper float 클래스 또는 텍스트 정렬 클래스로 이미지를 정렬하세요. block-level 이미지는 .mx-auto margin 유틸리티 클래스로 중앙 정렬할 수 있습니다.

html

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

html

<img src="..." class="rounded mx-auto d-block" alt="...">

html

<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

사진

<picture> 요소를 사용하여 특정 <img>에 대해 여러 <source> 요소를 지정하는 경우 <picture> 태그가 아닌 <img>에 .img-* 클래스를 추가해야 합니다.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Sass

변수

이미지 썸네일에 변수를 사용할 수 있습니다.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;