[basic] BS4 - Image (BS이미지) - 이미지모양 + 이미지정렬 + 반응형이미지

1. Image Shape (이미지 모양)
2. Image Align (이미지 정렬)
3. Image Responsive (이미지 반응형)

Image Shape (이미지 모양)

 

<img src="..." class="rounded" alt="곡선 이미지" >

<img src="..." class="rounded-circle" alt="원형 이미지">

<img src="..." class="img-thumbnail" alt="액자 이미지" >

 

※ BS3:  곡선 (.img-rounded), 원형(.img-circle) 

Image Align (이미지 정렬)

 

<img src="hz.jpg" class="float-left" alt="왼쪽정렬 (= 좌측정렬)">

<img src="hz.jpg" class="float-right" alt="오른쪽정렬 (= 우측정렬)">

<img src="hz.jpg" class="mx-auto d-block" alt="가운데정렬 (=중앙정렬)">

 

---

[참고]

 

.float-left { float: left!important; }

.float-right { float: right!important; }

.mx-auto (margin:auto) 

.d-block (display:block)

 

Image Responsive (이미지 반응형)

<img src="..." class="img-fluid" alt="반응형 이미지">

 

---

[참고]

.img-fluid { max-width: 100%; height: auto; }

 

BS3: .img-responsive 클래스 사용.