邊框不調整大小與圖像

我想圍繞調整大小的圖像邊框，但它需要原始的尺寸。如何在圖像周圍放置完美的邊框？邊框不調整大小與圖像

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; 
}

來源

2017-03-13 RogerFedFan

什麼是「padding-top」？這是在頂部創造了一個空白。 –

取出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>

來源

2017-03-13 01:16:01

邊框不調整大小與圖像

回答

相關問題