부트스트랩 4 이미지
부트스트랩 4 이미지 모양
둥근 모서리:
원:
썸네일:
둥근 모서리
.rounded클래스는 이미지에 둥근 모서리를 추가합니다 .
예시
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
원
.rounded-circle클래스는 이미지를 원으로 만듭니다 .
예시
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
썸네일
클래스는 이미지 의 .img-thumbnail모양을 축소판(테두리 있음)으로 만듭니다.
예시
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
이미지 정렬
.float-right클래스 를 사용하여 이미지를 오른쪽으로, 또는 다음을 사용하여 왼쪽으로 이미지를 띄우십시오 .float-left.
예시
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
중앙 이미지
.mx-auto유틸리티 클래스 (margin:auto) 및 .d-block(display:block)를 이미지에 추가하여 이미지를 중앙에 배치합니다 .
예시
<img src="paris.jpg" class="mx-auto d-block">
반응형 이미지
이미지는 모든 크기로 제공됩니다. 스크린도 마찬가지입니다. 반응형 이미지는 화면 크기에 맞게 자동으로 조정됩니다.
태그 에 .img-fluid클래스를 추가하여 반응형 이미지를 만듭니다 . <img>그러면 이미지가 상위 요소에 맞게 조정됩니다.
.img-fluid클래스 가 이미지에 max-width: 100%;적용
됩니다 .height: auto;
예시
<img class="img-fluid" src="img_chania.jpg" alt="Chania">