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

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

※ B4와 유사하나, 이미지정렬 클래스가 달라짐.

Image Shape (이미지 모양) 

 

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

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

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

 

---

PS. 둥글기 관련 클래스

.rounded {

  border-radius: 0.25rem !important;

}

.rounded-0 {

  border-radius: 0 !important;

}

.rounded-1 {

  border-radius: 0.2rem !important;

}

.rounded-2 {

  border-radius: 0.25rem !important;

}

.rounded-3 {

  border-radius: 0.3rem !important;

}

.rounded-circle {

  border-radius: 50% !important;

}

.rounded-pill {

  border-radius: 50rem !important;

}

.rounded-top {

  border-top-left-radius: 0.25rem !important;

  border-top-right-radius: 0.25rem !important;

}

.rounded-end {

  border-top-right-radius: 0.25rem !important;

  border-bottom-right-radius: 0.25rem !important;

}

.rounded-bottom {

  border-bottom-right-radius: 0.25rem !important;

  border-bottom-left-radius: 0.25rem !important;

}

.rounded-start {

  border-bottom-left-radius: 0.25rem !important;

  border-top-left-radius: 0.25rem !important;

}

 

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

Image Align (이미지 정렬)

 

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

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

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

 

---

[참고]

 

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

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

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

.mx-auto (margin:auto) 

.d-block (display:block)

 

cf. BS4 경우, (.float-left / .float-right) 클래스 사용.

Image Responsive (이미지 반응형)

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

 

---

[참고]

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

 

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