여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap - Bootstrap 4 이미지
Bootstrap – Bootstrap 4 이미지
6개월전 작성
6개월전 수정



부트스트랩 4 이미지 모양

둥근 모서리:

파리

원:

뉴욕

썸네일:

샌프란

 

둥근 모서리

.rounded 클래스는 이미지에 둥근 모서리를 추가한다.

예제
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" width="304" height="236">
기본 예시
Cinque Terre

.rounded-circle 클래스는 이미지를 원으로 만든다.

예제
<img src="https://www.w3schools.com/bootstrap4/cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
기본 예시
Cinque Terre

썸네일

.img-thumbnail 클래스는 이미지를 썸네일(테두리)로 만든다.

예제
<img src="https://www.w3schools.com/bootstrap4/cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
기본 예시
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">
기본 예시
Chania
참고
Mingg`s Diary
밍구
공부 목적 블로그