<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="https://i.imgur.com/1nHskKG.jpg">
     <img src="http://placeimg.com/600/400/animals">
    <img src="http://placeimg.com/700/300/animals">
    <img src="https://dummyimage.com/900x900/000/fff">
     <img src="https://dummyimage.com/1600x700/000/fff">
     <img src="https://dummyimage.com/600x700/000/fff">
     <img src="https://dummyimage.com/600x700/000/fff">
     <img src="https://dummyimage.com/600x700/000/fff">
     <img src="https://dummyimage.com/600x300/000/fff">
    <img src="http://placeimg.com/640/640/animals">
    <img src="http://placeimg.com/420/640/animals">
    <img src="http://placeimg.com/480/380/animals">
    <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">
</div>

.grid {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.grid > img {
  max-height: 200px;
  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;
  
}

let images = [...document.querySelectorAll(".grid img")];

images.forEach(function(image, index){

let src = image.getAttribute('src'),
    h = image.naturalHeight,
    w = image.naturalWidth,
    flexGrow = (w * 200) / h,
    flexBasis = (w * 280) / h,
    paddingBottom = (h / w) * 100;
  
    image.setAttribute('alt', 'pica-' + (index + 1));
   console.log(flexGrow);
  console.log(w);
   
    
     let figureCreate = document.createElement('figure');
        image.parentNode.insertBefore(figureCreate, image);
        // figure.appendChild();
        figureCreate.append(image);
        let iCreate = document.createElement('i');
        if (image.parentNode) {
            image.parentNode.insertBefore(iCreate, image)};
     
        let fig = document.querySelector("figure");
    console.log(fig);

    fig.style.flexGrow = flexGrow;
    fig.style.flexBasis = flexBasis + 'px';
    

    let iElem = document.querySelector("i");
    iElem.style.paddingBottom = paddingBottom + '%';
    
    let img = new Image();
      img.onload = function() {
        fig.classList.add('loaded');
      };

      img.src = src;
      
      console.log(src);
   
    }
)