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

【问题标题】：Prevent image ignoring padding and border of a container防止图像忽略容器的填充和边框
【发布时间】：2017-03-02 03:31:26
【问题描述】：

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

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>

如何防止这种行为？

【问题讨论】：

所以你希望 img 能装在盒子里，对吧？然后使用背景图像。
@Leothelion 没错。我想将图像放入容器中。背景图片不适合我。
add max-height: 100% for a img 是你需要的吗？
@kukkuz 谢谢，这解决了问题

标签： html image css flexbox

【解决方案1】：

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

参见下面的 sn-p：

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>

【讨论】：

【解决方案2】：

喜欢这段代码

  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">

【讨论】：

同@jogoe answear

【解决方案3】：

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

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

【讨论】：

在这个图像宽度宽度>高度是拉伸不成比例的

【解决方案4】：

将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>

【讨论】：

【解决方案5】：

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

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;
}

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

【讨论】：