이미지

이미지를 반응형 동작으로 선택하고(상위 이미지보다 더 넓어지지 않도록) 클래스를 통해 가벼운 스타일을 추가하는 문서 및 예제.

이 페이지에서

반응형 이미지

부트스트랩의 이미지는 .img-fluid. 이는 이미지에 적용 max-width: 100%;되어 height: auto;상위 너비에 맞게 조정됩니다.

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

이미지 축소판

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

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

이미지 정렬

도우미 float 클래스 또는 텍스트 정렬 클래스 로 이미지를 정렬 합니다. -레벨 이미지는 여백 유틸리티 클래스 를 사용 하여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>여러 요소를 지정하기 위해 요소를 사용하는 경우 태그 가 아닌 클래스를 추가해야 합니다 .<source><img>.img-*<img><picture>

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

사스

변수

이미지 축소판에 변수를 사용할 수 있습니다.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;