Equal column height

Equal column height using css

by Nikhil krishnan

HTML

<div class="col">
  <div class="without-thumbnail--cover">
    <span class="thumbnail__inner2">
    <img src="http://placehold.it/350x150" alt="">
  </span>
  </div>
</div>
<div class="col">
  <div class="without-thumbnail--cover">
    <span class="thumbnail__inner2">
    <img src="http://placehold.it/350x250" alt="">
  </span>
  </div>
</div>
<div class="col">
  <div class="without-thumbnail--cover">
    <span class="thumbnail__inner2">
    <img src="http://placehold.it/150x150" alt="">
  </span>
  </div>
</div>

CSS

*{
  box-sizing: border-box;
}
.col {
  float: left;
  width: 33.333%;
  border:solid 1px red;
}

.without-thumbnail--cover::before {
  margin-top: 100%;
}

.without-thumbnail--cover {
  display: block;
  height: 0;
  padding-bottom: 100%;
  position: relative;
  text-align: center;
}

.without-thumbnail--cover .thumbnail__inner2 {
  bottom: 0;
  display: inline-block;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.without-thumbnail--cover .thumbnail__inner2 img {
  height: 100%;
  vertical-align: middle;
  max-width: 100%;
  width: auto;
}

JavaScript

//Equal column height using css