JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div id="parent">
  <div id="owrap">
    <img id="fit" src="http://placekitten.com/g/900/600" />
    <div id="close">close</div>
  </div>
</div>


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultricies accumsan metus a laoreet. Nullam pharetra erat dolor. Nunc dapibus, urna eget imperdiet ornare, lorem lacus scelerisque ligula, sit amet pellentesque dolor urna vel enim. Morbi pretium, odio et posuere lacinia, neque lacus lobortis tellus, sit amet lobortis nibh augue sed justo. Vestibulum sollicitudin mattis bibendum. Sed bibendum sagittis pulvinar. Mauris aliquam posuere interdum. Fusce eleifend hendrerit lectus, tristique vehicula felis fermentum consequat. Etiam non condimentum arcu. Donec in suscipit arcu. Cras mattis, lacus sagittis euismod molestie, nulla magna tempor mauris, in posuere lorem tellus vitae sapien. Fusce eget augue ultricies lacus ultrices viverra id mattis mauris. Nullam quis nunc nunc, nec vulputate urna.

Cras porta congue mauris, at luctus est tempus sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel quam eros. Nulla egestas elementum dui, eget eleifend tortor facilisis eget. Vestibulum massa ante, malesuada vel hendrerit at, congue et enim. Etiam eget arcu nisi, nec faucibus lacus. Nunc ut orci at purus suscipit dapibus. Quisque ultrices cursus dui, at placerat nisl fermentum quis. Donec massa metus, iaculis eu accumsan a, placerat sit amet augue.

Mauris congue, velit a volutpat laoreet, velit ipsum molestie ligula, non vestibulum leo eros et felis. In ac nunc tellus, at porta erat. Proin enim dolor, lobortis id rutrum vitae, iaculis vel purus. Morbi enim mauris, faucibus eget dapibus sit amet, porttitor eleifend nisi. Sed eget risus augue. Maecenas sollicitudin purus et ipsum porta sed pretium felis aliquet. Aenean urna erat, feugiat id facilisis sed, egestas id nulla. In euismod, quam non sagittis hendrerit, nibh dolor sollicitudin sapien, eget ullamcorper...

CSS

#parent {
  position: fixed;
  top: 20px;
  right: 20px;
  bottom: 20px;
  left: 20px;
}

#owrap { 
  position: relative; 
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
}

#fit {
  margin-top: -10px;
  margin-left: -10px;
  border: 10px solid red;
  position: absolute;
  visibility: hidden;
  float: left;
  overflow: auto;
}

#close {
	position: absolute;
	bottom: 0px;
	right: 0px;
}

#fit.landscape {
  width: 100%;
}

#fit.portrait {
  height: 100%;
}

#fit.show {
  visibility: visible;
}

JavaScript

// Images loaded plugin
// https://github.com/desandro/imagesloaded
(function(c,q){var m="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";c.fn.imagesLoaded=function(f){function n(){var b=c(j),a=c(h);d&&(h.length?d.reject(e,b,a):d.resolve(e));c.isFunction(f)&&f.call(g,e,b,a)}function p(b){k(b.target,"error"===b.type)}function k(b,a){b.src===m||-1!==c.inArray(b,l)||(l.push(b),a?h.push(b):j.push(b),c.data(b,"imagesLoaded",{isBroken:a,src:b.src}),r&&d.notifyWith(c(b),[a,e,c(j),c(h)]),e.length===l.length&&(setTimeout(n),e.unbind(".imagesLoaded",
p)))}var g=this,d=c.isFunction(c.Deferred)?c.Deferred():0,r=c.isFunction(d.notify),e=g.find("img").add(g.filter("img")),l=[],j=[],h=[];c.isPlainObject(f)&&c.each(f,function(b,a){if("callback"===b)f=a;else if(d)d[b](a)});e.length?e.bind("load.imagesLoaded error.imagesLoaded",p).each(function(b,a){var d=a.src,e=c.data(a,"imagesLoaded");if(e&&e.src===d)k(a,e.isBroken);else if(a.complete&&a.naturalWidth!==q)k(a,0===a.naturalWidth||0===a.naturalHeight);else if(a.readyState||a.complete)a.src=m,a.src=d}):
n();return d?d.promise(g):g}})(jQuery);



$(document).ready(function() {
  $('#fit').imagesLoaded(function() {

    // Get original dimensions of the img.
    var img = $(this),
        iimgW = img.width(),
        iimgH = img.height(),
        win = $(window),
        l = 'landscape',
        p = 'portrait';

    function imgFit() {
      
      var	winW = ( win.width() + 1 ),
          winH = ( win.height() + 1 );
      
      // Set maximum dimensions
      img.css({ 
        maxWidth: iimgW, 
        maxHeight: iimgH 
      })
      
      // Image is wider or equal to window.
      // Window is taller or equal to image.
      // - Landscape
      
      if( iimgW >= iimgH ) {
        img.addClass( l ).removeClass( p );
        img.height() + 40 > winH && img.addClass( p ).removeClass( l );
      }
      // Image is taller or equal to window.
      // Window is wider or equal to image.
      // -...