Bootstrap 5 이미지

추천 과정:

이미지 모양

둥글은 모서리 .rounded

예제

클래스는 이미지에 둥글은 모서리를 추가합니다:

직접 시험해 보세요

<img src="flower.jpg" class="rounded" alt="Flower">

원형 .rounded-circle

예제

클래스는 이미지를 원형으로 만듭니다:

직접 시험해 보세요

<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">

스케일러드 .img-thumbnail

예제

클래스는 이미지를 각이한 모양으로 만듭니다(경계선 포함):

직접 시험해 보세요

<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">

이미지를 정렬 사용하여 .float-start 클래스는 이미지를 왼쪽으로浮动하거나 .float-end

예제

오른쪽으로浮动：
<img src="tulip.jpg" class="float-start">

직접 시험해 보세요

<img src="tulip.jpg" class="float-end">

중앙 이미지 이미지를 중앙에 배치하기 위해 utility 클래스를 추가하여 .mx-auto (margin:auto)과 .d-block

예제

(display:block)：

직접 시험해 보세요

<img src="tulip.jpg" class="mx-auto d-block">

반응형 이미지

이미지는 다양한 크기를 가지고 있습니다. 스크린도 마찬가지입니다. 반응형 이미지는 스크린 크기에 따라 자동으로 조정됩니다. .img-fluid 클래스를 추가하여 <img> 태그를 사용하여 반응형 이미지를 생성합니다. 그런 다음 이미지는 부모 요소 내에서 잘 줄여집니다.

.img-fluid 이미지에 클래스를 적용 max-width: 100%; 및 height: auto; ：

예제

<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">

직접 시험해 보세요