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

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>