JSFiddle - React, Tailwind, and code Playground

by cameronolivier

HTML

<div id="cover">
<img src="https://upload.wikimedia.org/wikipedia/en/f/fc/Thor_poster.jpg" />
</div>

CSS

#cover {
  width:300px;
  height:650px;
  background:yellow;
}

JavaScript

var coverImage = function(wrap, center) {

  if (typeof center === 'undefined') {
    center = true;
  }
  
	var wr = $(wrap),
  	 	wrw = wr.width(),
  		wrh = wr.height();
  
  var im = wr.children('img'),
  		imw = im.width(),
  		imh = im.height();
  
  var wratio = wrw / imw;
	var hratio = wrh / imh;
  
  //Set required CSS
  wr.css({'overflow' : 'hidden'});
  im.css({'position' : 'relative'});
  

  if (wratio > hratio) {
    im.width(wrw);
    im.css({'height' : 'auto'});
    
    if (center) {
      im.css({
        'top' : '50%',
        'transform' : 'translateY(-50%)'
      });
    }
  } else {
    im.height(wrh);
    im.css({'width' : 'auto'});
    
    if (center) {
      im.css({
        'left' : '50%',
        'transform' : 'translateX(-50%)'
      });
    }
  }
}

coverImage('#cover');