JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="device-wrapper">
  <div class="device">
    <div class="tile">
      <img class="img" src="https://i.pinimg.com/originals/e6/39/ec/e639ec046727db4c702ef1f8ea177742.jpg" />
      
    </div>
  </div>
</div>

<div class="controls">
  <label>
    Both scale
    <input id="bs" type="range" min="0" max="100" step="1" value="100">
    <b id="bv">100</b>
  </label>

  <button class="play">
    Play
  </button>
</div>

CSS

body{
  overflow: hidden;
}

.device-wrapper{
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 375px;
  height: 812px;
  box-shadow: inset 0 0 5px 2px #f1f1f1, 
              inset 0 0 15px 1px #d8dde0,
              0 10px 25px 2px #b5b4b4;
  border-radius: 30px;
}

.device{
	width: 375px;
  height: 812px;
  box-shadow: inset 0 0 3px #f1f1f1, 
              0 0 0 1px #efefef;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
}

.tile{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 225.66665649414062px;
  overflow: hidden;
}

.controls{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: #fff;
  text-align: center;
}

.controls label{
  display: flex;
  justify-content: center;
  font-family: sans-serif;
}

.controls label input{
  margin: 3px 20px;
}

JavaScript

var $device = $('.device'),
		$img = $('.img'),
		$tile = $('.tile'),
    $play = $('.play'),
    
    ANIMATION_DURATION = 550,//ms

		deviceWidth = $device.width(),
		deviceHeight = $device.height(),
    
    imageWidth = $img.prop('naturalWidth'),
    imageHeight = $img.prop('naturalHeight'),
    
    tileWidth = $tile.width(),
    tileHeight = $tile.height(),
    
    imageRatio = imageWidth / imageHeight,
    deviceRatio = deviceWidth / deviceHeight,
		/* tileRatio = tileWidth / tileHeight, */
    
    /* finalImageWidth = imageWidth > imageHeight ? 
                                Math.min(imageWidth, deviceWidth) : 
                                Math.min(imageHeight, deviceHeight) * imageRatio,
    finalImageHeight = imageWidth > imageHeight ? 
    Math.min(imageWidth, deviceWidth) / imageRatio : 
    Math.min(imageHeight, deviceHeight), */
    
    finalImageWidth = deviceWidth > imageWidth ? imageWidth : deviceWidth,
    finalImageHeight = deviceHeight > imageHeight ? imageHeight : deviceHeight,

    tileScaleA = 1,
    tileScaleB = 100/Math.min(tileWidth, tileHeight) * Math.max(deviceWidth, deviceHeight)/100,
    
    /* NIU: 
    	finalTileWidth = tileWidth * tileScaleB,
    	finalTileHeight = tileHeight * tileScaleB, */
    
    imageScaleA = Math.max(tileWidth,tileHeight)/Math.min(imageWidth, imageHeight),
    imageScaleB = Math.max(finalImageHeight, finalImageWidth) / (Math.max(imageHeight, imageWidth) * tileScaleB),
    
    tileRadiusA = 10,
    tileRadiusB = 0;
    
console.log("\ndeviceWidth:", deviceWidth,
			"\ndeviceHeight:", deviceHeight,
			"\nimageWidth:", imageWidth,
			"\nimageHeight:", imageHeight,
			"\ntileHeight:", tileHeight,
			"\ntileWidth:", tileWidth,
			"\nimageRatio:", imageRatio,
			"\nfinalImageWidth:", finalImageWidth,
			"\nfinalImageHeight:", finalImageHeight,
			"\ntileScaleA:", tileScaleA,
			"\ntileScaleB:", tileScaleB,
			"\nimageScaleA:", imageScaleA,
			"\nimageScaleB:", imageScaleB,
			"\ntileRadiusA:",...