부트스트랩 4 이미지 모양
둥근 모서리:
원:
썸네일:
둥근 모서리
.rounded 클래스는 이미지에 둥근 모서리를 추가한다.
예제
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
기본 예시
원
.rounded-circle 클래스는 이미지를 원으로 만든다.
예제
<img src="https://www.w3schools.com/bootstrap4/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
기본 예시
썸네일
.img-thumbnail 클래스는 이미지를 썸네일(테두리)로 만든다.
예제
<img src="https://www.w3schools.com/bootstrap4/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
기본 예시
이미지 정렬
.float-right 클래스가 있는 경우 오른쪽에 이미지를 띄우거나 .float-left를 사용하여 왼쪽에 이미지를 띄운다.
예제
<img src="https://www.w3schools.com/bootstrap4/paris.jpg" class="float-left"> <img src="https://www.w3schools.com/bootstrap4/paris.jpg" class="float-right">
기본 예시
중심 이미지
유틸리티 클래스 .mx-auto(margin:auto) 및 .d-block(display:block)를 이미지에 추가하여 이미지를 중앙에 배치한다.
예제
<img src="https://www.w3schools.com/bootstrap4/paris.jpg" class="mx-auto d-block" style="width:50%">
기본 예시
반응형 이미지
이미지는 모든 크기로 제공된다.
스크린도 마찬가지다.
반응형 이미지는 화면 크기에 맞게 자동으로 조정된다.
태그에 .img-fluid 클래스를 추가하여 반응형 이미지 <img>를 만든다.
그러면 이미지가 상위 요소에 맞게 크기가 조정된다.
.img-fluid 클래스로 이미지에 max-width: 100%; height: auto; 적용된다.
예제
<img class="img-fluid" src="https://www.w3schools.com/bootstrap4/img_chania.jpg" alt="Chania">
기본 예시
참고
W3C School - Bootstrap – Bootstrap 4 Images
공부 목적 블로그