边框不调整大小与图像

我想围绕调整大小的图像边框，但它需要原始的尺寸。如何在图像周围放置完美的边框？边框不调整大小与图像

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

边框不调整大小与图像

回答

相关问题