CSS Image equal height

CSS Image equal height

by Nikhil krishnan

HTML

<div>
 <img src="https://cdn.pixabay.com/photo/2016/01/18/05/09/face-1146038_960_720.jpg" alt="" class="size-1">
</div>

<div>
 <img src="https://cdn.pixabay.com/photo/2016/01/18/05/09/face-1146038_960_720.jpg" alt="" class="size-2">
</div>

<div>
 <img src="https://cdn.pixabay.com/photo/2016/01/18/05/09/face-1146038_960_720.jpg" alt="" class="size-3">
</div>

<div>
 <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="" class="size-4">
</div>

<div>
 <img src="https://cdn.pixabay.com/photo/2016/01/18/05/09/face-1146038_960_720.jpg" alt="" class="size-5">
</div>

CSS

div{
 border: 1px solid red;
height: 150px;
position: relative;
text-align: center;
width: 200px;
}
img{
  display: inline-block;
  left: 50%;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  vertical-align: top;
  }
  
  .size-1{
    width:50px;
  }
  .size-2{
    height:50px;
  }
  
  .size-3{
    height:500px;
  }
  
 .size-4{
    width:500px;
  }

JavaScript

//CSS Image equal height