防止图像忽略容器的填充和边框

Question

我有一个图像和容器。图像可以在容器中以水平和垂直为中心。容器也有边框和填充。但图像忽略容器垂直边框和填充。

a{
  display:-webkit-inline-flex;
  display:inline-flex;
  -webkit-justify-content:center;
  justify-content:center;
  -webkit-align-items:center;
  align-items:center;
  width:166px;
  height:146px;
  padding:8px;
  border-width:1px;
  border-style:solid;
  border-color:#000;
}

a img{
  display:inline;
  width:auto;
  max-width:100%;
}

<a href="/">
  <img src="http://placekitten.com/200/300">
</a>

如何防止这种行为？

Answer 1

将max-height: 100%添加到a img可以解决问题。

请参阅下面的代码段：

a{
  display:-webkit-inline-flex;
  display:inline-flex;
  -webkit-justify-content:center;
  justify-content:center;
  -webkit-align-items:center;
  align-items:center;
  width:166px;
  height:146px;
  padding:8px;
  border-width:1px;
  border-style:solid;
  border-color:#000;
}

a img{
  display:block;
  width:auto;
  max-width:100%;
  max-height: 100%;
}

<a href="/">
  <img src="http://placekitten.com/200/300">
</a>

Answer 2

添加宽度img容器而不是超链接

＆＃13;

＆＃13;

a{
  display:-webkit-inline-flex;
  display:inline-flex;
  -webkit-justify-content:center;
  justify-content:center;
  -webkit-align-items:center;
  align-items:center;
  
  padding:8px;
  border-width:1px;
  border-style:solid;
  border-color:#000;
}

a img{
  display:inline;
  max-width:100%;
  width:166px;
}

＆＃13;

<a href="/">
  <img src="http://placekitten.com/200/300">
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 3

喜欢这段代码

  a{
 display:-webkit-inline-flex;
 display:inline-flex;
  -webkit-justify-content:center;
  justify-content:center;
 -webkit-align-items:center;
align-items:center;
padding:8px;
border-width:1px;
border-style:solid;
border-color:#000;
height:auto;
}

a img{
max-width:100%;
width:166px;
height:144px;
}
<a href="/">
<img src="http://placekitten.com/200/300">

Answer 4

添加height属性可以解决您的问题。

a img{
  display:inline;
  width:auto;
  max-width:100%;
  height: 100%;
}

Answer 5

将auto赋予标签的高度和宽度

a{
  display:-webkit-inline-flex;
  display:inline-flex;
  -webkit-justify-content:center;
  justify-content:center;
  -webkit-align-items:center;
  align-items:center;
  width:auto;
  height:auto;
  padding:8px;
  border-width:1px;
  border-style:solid;
  border-color:#000;
}

a img{
  display:inline;
  width:auto;
  max-width:100%;
}

<a href="/">
  <img src="http://placekitten.com/200/300">
</a>