如何使图像边框环绕图像

Question

我需要将边框应用于a标签，但是当我这样做时，边框不会环绕图像我该如何实现？

<div>
  <a href="#">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png">
  </a>
</div>

的CSS：

a{
  border: 5px solid blue;
}

https://jsfiddle.net/b7qdcub1/

Answer 1

您必须将display: block应用于a标记，以使其表现为块级元素。同时为其提供固定的width和height以包含其中的图像。

参考代码：

a {
  border: 5px solid blue;
  display: block;
  width: 720px;
  height: 720px;
}

<div>
  <a href="#">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png">
  </a>
</div>

Answer 2

我猜你正在尝试将图像剪辑到其边界。试试这个

a{
border: 5px solid blue;
overflow: hidden;
}

Answer 3

    a{
  border: 5px solid blue;
  display:inline-block;
}

Answer 4

如果您想了解为什么锚标记不包含其包含元素的高度和宽度 Read This Answer。我正在使用css outline而不是边界属性。

N.B：有很多技巧你可以解决这个问题。比如为img元素设置边框或在锚标记上设置display inline-block。检查此Fiddle以获取更多解决方案

div a{
outline:5px solid blue;
}
div a img{
 vertical-align:bottom; /* Need this to clear white-space */

}

<div>
 <a href="#">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png">
  </a>
</div>
   

Answer 5

只需在div上放置一个边框。

＆＃13;

＆＃13;

div {
border:solid;}

＆＃13;

<div>
  <a href="#">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/17/41/javascript-736400_960_720.png">
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;