[Bootstrap] 이미지 조정 방법

1. img-fluid 클래스를 사용하는 방법

img-fluid 클래스는 이미지가 부모 요소에 맞게 늘어나도록 만들어줍니다. 즉, 부모 요소가 브라우저 창이거나, 다른 요소인 경우에도 이미지가 유연하게 조정됩니다.

<img src="your-image-path-here" alt="Your Image" class="img-fluid">

1. w- 클래스를 사용하는 방법

w- 클래스는 이미지의 너비를 지정해줍니다. w-25와 같이 사용하면 이미지의 너비를 25%로 조정할 수 있습니다.

<img src="your-image-path-here" alt="Your Image" class="w-25">

 

2. h- 클래스를 사용하는 방법

h- 클래스는 이미지의 높이를 지정해줍니다. h-50와 같이 사용하면 이미지의 높이를 50%로 조정할 수 있습니다.

<img src="your-image-path-here" alt="Your Image" class="h-50">

3. resize 속성을 사용하는 방법

resize 속성은 이미지의 너비와 높이를 직접 지정해줄 수 있습니다. width와 height 속성을 이용하여 크기를 조정합니다.

<img src="your-image-path-here" alt="Your Image" width="200" height="200">

이처럼 Bootstrap에서는 다양한 방법으로 이미지의 크기를 조정할 수 있습니다. 원하는 방식에 맞게 사용하면 됩니다.