이미지

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

반응형 이미지

부트스트랩의 이미지는 .img-fluid. max-width: 100%;상위 요소 와 height: auto;함께 크기가 조정되도록 이미지에 적용됩니다.

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

SVG 이미지 및 Internet Explorer

Internet Explorer 10 및 11에서 SVG 이미지의 .img-fluid크기는 불균형적입니다. 이 문제를 해결하려면 필요한 위치에 또는를 추가 width: 100%;하세요 .w-100. 이 수정 사항은 다른 이미지 형식의 크기를 부적절하게 조정하므로 Bootstrap이 자동으로 적용하지 않습니다.

이미지 축소판

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

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

이미지 정렬

도우미 float 클래스 또는 텍스트 정렬 클래스 로 이미지를 정렬 합니다. -레벨 이미지는 여백 유틸리티 클래스 를 사용 하여block 중앙에 배치할 수 있습니다 ..mx-auto

<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" 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>