in English
이미지
이미지를 반응형 동작으로 선택하고(상위 요소보다 커지지 않도록) 클래스를 통해 가벼운 스타일을 추가하는 문서 및 예제.
이 페이지에서
반응형 이미지
부트스트랩의 이미지는 .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;