Head

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Body

<div class="container">

	<h1>이미지(Images)</h1>

	<div class="row">
	  <div class="col-md-3">
	    <img src="/wp-content/uploads/2015/08/image1.jpg" alt="..." class="img-responsive img-rounded">
	  </div>  
	  <div class="col-md-3">
	    <img src="/wp-content/uploads/2015/08/image1.jpg" alt="..." class="img-responsive img-thumbnail">
	  </div>  
	  <div class="col-md-3">  
	    <img src="/wp-content/uploads/2015/08/image1.jpg" alt="..." class="img-responsive img-circle">
	  </div>
	  <div class="col-md-3">  
	    <img src="/wp-content/uploads/2015/08/image4.jpg" alt="..." class="img-responsive img-circle">
	  </div>
	</div>

</div>

설명

.img-reponsive 클래스를 사용하면 부트스트랩에서 이미지를 반응형으로 만들 수 있습니다.

또한, 아래와 같이 클래스를 추가해서 이미지의 형태를 정할 수 있습니다.

.img-rounded : 모서리를 둥글게
.img-thumbnail : 테두리 사용
.img-circle : 둥근 원 이미지 (둥근 정도는 원본이미지의 가로세로 비율에 따라 다릅니다.

 

 

출처 : http://zzznara2.tistory.com/526