JSFiddle - React, Tailwind, and code Playground

by KURO KUMO

HTML

<div class="log">start</div>
<div class="img-block-center">
  <img src="http://placehold.it/200x200/">
</div>
<div class="img-block-center">
  <img src="http://placehold.it/800x230/">
</div>
<div class="img-block-center">
  <img src="http://placehold.it/100x300/">
</div>

CSS

.img-block-center {
  width: 170px;
  height: 170px;
  background: #eee;
  display: block;
  margin: 10px;
  visibility: hidden;
}

.log {
  margin: 10px;
}

JavaScript

$(".img-block-center").each(function(index) {
  var img = $(this).find("img");
  var blockW = $(this).width();
  var blockH = $(this).height();
  var imgW = img.width();
  var imgH = img.height();
  var imgR = imgW / imgH;

  img.css("opacity", 0);

  $(this).width(blockW).height(blockW);

  //square
  if (imgR == 1) {
    img.width(blockW).height(blockW);
  }

  //portrait
  if (imgR < 1) {
    img.height(blockW);
    var resizeW = img.width();
    var resizeH = img.height();
    var marge = resizeH - resizeW;
    img.css({
      "margin-left": marge / 2,
      "margin-right": marge / 2
    });
  };

  //landscape
  if (imgR > 1) {
    img.width(blockW);
    var resizeW = img.width();
    var resizeH = img.height();
    var marge = resizeW - resizeH;
    img.css({
      "margin-top": marge / 2,
      "margin-bottom": marge / 2
    });
  };

  $(this).css("visibility", "visible");

  setTimeout(function() {
    img.animate({
      opacity: 1
    }, 1000, function() {
      // Animation complete.
      $(".log").text("image " + (index + 1) + " animation complete")
    });
  }, index * 500);
});