둥근모서리형 (Rounded Corners)
.rounded
클래스는 이미지에 둥근 모서리를 추가합니다.
원형 (Circle)
.rounded-circle
클래스는 이미지를 원으로 만듭니다.
썸네일형 (Thumbnail)
.img-thumbnail
클래스는 이미지를 썸네일형태(테두리 있음)로 만듭니다.
이미지 정렬 (Aligning Images)
.float-right 클래스를 사용하여 이미지를 오른쪽으로 정렬하거나 .float-left를 사용하여 왼쪽으로 이미지를 정렬합니다.
Example
<img src="paris.jpg" class="float-left">
<img src="paris.jpg" class="float-right">
Try it Yourself »이미지 중앙정렬 (Centered Image)
.mx-auto(margin:auto)와 .d-block(display:block) 클래스를 추가하여 이미지를 중앙에 배치합니다.
반응형 이미지 (Responsive Images)
모든 크기의 이미지에 대해서 반응형 이미지는 화면 크기에 맞게 자동으로 조정됩니다.
<img>태그에 .img-fluid 클래스를 추가하여 반응형 이미지를 만듭니다. 그러면 이미지가 상위 요소에 맞게 조정됩니다.
.img-fluid 클래스는 max-width: 100%를 적용합니다. 그리고 height: auto 높이는 자동으로 적용됩니다.
- 22-03-02
- 84 회
- 0 건