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>

边框没有调整图像

1 个答案: