<div class="grid">

    <!--
    "flexGrow":      photo.width * 100 / photo.height,
    "flexBasis":     photo.width * 240 / photo.height,
    "paddingBottom": photo.height / photo.width * 100,
    -->
    <img src="http://placeimg.com/400/600/animals">
    <img src="http://placeimg.com/600/400/animals">
    <img src="http://placeimg.com/700/300/animals">
    <img src="http://placeimg.com/640/640/animals">
  <img src="http://placeimg.com/640/480/any">
  
    <img src="http://dummyimage.com/600x1200/000/fff">
    <img src="https://dummyimage.com/600x700/000/fff">
    <img src="https://dummyimage.com/600x900/000/fff">
  
    <img src="https://placeimg.com/640/480/any">
     <img src="https://placeimg.com/640/480/any">   
  
  <img src="https://placeimg.com/640/480/any">
  
    <img src="https://dummyimage.com/600x800/000/fff">
    <img src="https://dummyimage.com/300x700/000/fff">
    <img src="https://dummyimage.com/200x700/000/fff">
  
    <img src="http://placeimg.com/420/640/animals">
    <img src="https://imgur.com/gallery/Zsh0DYK">
    <img src="http://placeimg.com/560/365/animals">
    <img src="http://placeimg.com/585/250/animals">
    <img src="http://placeimg.com/850/640/animals">
    <img src="http://placeimg.com/700/635/animals">
    <img src="http://placeimg.com/420/610/animals">
    <img src="http://placeimg.com/800/240/animals">
    <img src="http://placeimg.com/565/745/animals">
    <img src="http://placeimg.com/700/300/animals">
    <img src="http://placeimg.com/785/725/animals">
    <img src="http://placeimg.com/1060/795/animals">
    <img src="http://placeimg.com/1050/585/animals">
    <img src="http://placeimg.com/310/660/animals">
    <img src="http://placeimg.com/460/640/animals">
    <img src="http://placeimg.com/580/330/animals">
   
    <img src="http://placeimg.com/1180/875/animals">
    <img src="http://placeimg.com/1340/1580/animals">
    <img src="http://placeimg.com/1050/1485/animals">
  
    <img src="http://placeimg.com/800/250/animals">
    <img src="http://placeimg.com/610/725/animals">
    <img src="http://placeimg.com/1590/665/animals">
    <img src="http://placeimg.com/1050/1400/animals">
    <img src="http://placeimg.com/1015/1415/animals">
    <img src="http://placeimg.com/690/875/animals">
</div>

.grid {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.grid > img {
  max-height: 100px;
  opacity: 0;
}

.grid img {
  opacity: 0;
  transition: opacity 0.3s;
}

.grid::after {
  content: '';
  flex-grow: 999999999;
}

.grid > figure {
  margin: 2px;
  background-color: violet;
  position: relative;
  transition: all 1s ease-in-out;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1);
  transition: all 0.4s ease-in-out;
  position: relative;
  z-index: 0;
  border:1px solid red;
}
.grid > figure.loaded {
  transform: scale(1);
}
.grid > figure.loaded img {
  opacity: 0.99999;
}
.grid > figure.loaded:hover {
  transform: scale(1.05);
  z-index: 5;
}

.grid > figure > i {
  display: block;
}

.grid > figure > img {
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
}

jQuery(function($) {
  $('.grid img').each(function(i) {
    var src = $(this).attr('src'),
      size = src.split('/').reverse(),
      h = parseInt(size[1]),
      w = parseInt(size[2]),
      flexGrow = (w * 200) / h,
      flexBasis = (w * 280) / h,
      paddingBottom = (h / w) * 100;
    $(this).attr('alt', 'kitten-' + (i + 1))
      .wrap('<figure>').before('<i>');
    
    var figure = $(this).parent('figure');
      figure.css({
        'flex-grow': flexGrow,
        'flex-basis': flexBasis + 'px'
      })
      .find('i').css({
        'padding-bottom': paddingBottom + '%'
      });

    var img = new Image();
    img.onload = function() {
      figure.addClass('loaded');
    };
    img.src = src;
  });
});
console.log(img.naturalHeight,    img.naturalWidth);