테두리가 이미지 크기가 조정되지 않음

Question

크기가 조정 된 이미지 주위에 테두리를 맞추려고하지만 원본 크기를 사용합니다. 이미지 주위에 완벽한 경계를 배치하려면 어떻게합니까?

HTML :

<div id="show"> 
<h1>Featured Items</h1> 
    <div class="row"> 
     <div class="col-md-4" align="center"> 
      <img src="C:\Users\Gabriel\Downloads\1.png"> 
     </div> 

     <div class="col-md-4" align="center"> 
      <img src="C:\Users\Gabriel\Downloads\1.png"> 
     </div> 

     <div class="col-md-4" align="center"> 
      <img src="C:\Users\Gabriel\Downloads\1.png"> 
     </div> 
    </div> 
</div> 

CSS :

#show img { 
padding-top: 50px; 
max-width: 50%; 
max-height: 50%; 
border: solid 1px #6E4E34; 
} 

Answer 1

가 padding-top를 제거하고 경계가 img

#show img { 
 
max-width: 50%; 
 
max-height: 50%; 
 
border: solid 1px #6E4E34; 
 
}

<div id="show"> 
 
<h1>Featured Items</h1> 
 
    <div class="row"> 
 
     <div class="col-md-4" align="center"> 
 
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
     </div> 
 

 
     <div class="col-md-4" align="center"> 
 
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
     </div> 
 

 
     <div class="col-md-4" align="center"> 
 
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
     </div> 
 
    </div> 
 
</div>

과 접하게됩니다