Evgeniy Evgeniy - 1 month ago 4
CSS Question

Prevent image ignoring padding and border of a container

I have an image and container for it. Image can center by horizontal and vertical in container. Also container has border and padding. But image ignore container vertical border and padding.



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>





How can prevent this behaviour?

Answer

Add max-height: 100% to a img solves the issue.

See snippet below:

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>

Comments