aspect ratio

In this example below you will see how to do a aspect ratio with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Manfred Kempener, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Manfred Kempener ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>aspect ratio</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="aspectRatio"></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mikeK/aspect-ratio-MbEPJq */
body { width: 100%; height: 100%; padding: 0; margin: 0; }
#aspectRatio { 
  background: #ff6a00; 

  margin: 20px auto;
}

/*Downloaded from https://www.codeseek.co/mikeK/aspect-ratio-MbEPJq */
window.onload = function () {
  //Let's create a function that will scale an element with the desired ratio
  //Specify the element id, desired width, and height
  function keepAspectRatio(id, width, height) {
    var aspectRatioDiv = document.getElementById(id);
    aspectRatioDiv.style.width = (window.innerWidth -50) + "px";
    aspectRatioDiv.style.height = (window.innerWidth / (width / height)) + "px";
  }

  //run the function when the window loads
  keepAspectRatio("aspectRatio", 16, 9);

  //run the function every time the window is resized
  window.onresize = function (event) {
    keepAspectRatio("aspectRatio", 16, 9);
  }
}

Comments