[Bootstrap] 이미지(Image)

1. img 태그를 위한 클래스

• rounded(BS4), img-rounded(BS3) : 이미지의 모서리를 둥글게 함
• rounded-circle(BS4), img-circle(BS3) : 이미지를 둥글게 함
• img-thumbnail : 썸네일 이미지를 사용하기 위해 미리 정의된 디자인을 적용함. 브라우저 가로 길이에 따라 축소됨
• float-left, float-right (BS4) : 이미지를 좌, 우측 정렬함
• mx-auto + d-block (BS4) : 이미지를 중앙에 정렬
• img-fluid(BS4) : 브라우저 가로 길이에 따라 축소됨
• img-responsive (BS3) : 브라우저 가로 길이에 따라 축소됨

	<div class="container">
		<h3>rounded 클래스</h3>
		<img src="img/newyork.jpg" class="rounded"/>
		<hr>

		<h3>rounded-circle 클래스</h3>
		<img src="img/paris.jpg" class="rounded-circle"/>
		<hr>

		<h3>img-thumbnail 클래스</h3>
		<img src="img/sanfran.jpg" class="img-thumbnail"/>
		<hr>

		<h3>float-left, float-right 클래스</h3>
		<div class="clearfix">
			<img src="img/sanfran.jpg" class="float-left"/>
			<img src="img/sanfran.jpg" class="float-right"/>
		</div>
		<hr>

		<h3>mx-auto + d-block 클래스</h3>
		<img src="img/sanfran.jpg" class="mx-auto d-block">
		<h3>img-fluid</h3>
		<img src="img/sanfran.jpg" class="img-fluid">
	</div>

 

References

source code : https://github.com/yonghwankim-dev/Bootstrap_study/tree/main/Image/src/main/webapp
[인프런] 윤재성의 Bootstrap 4 & 3 Framework Tutorial