Aspect Ratios

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

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

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

  
</head>

<body>

  <body>

   <!--    <div class="container">
      <div class="text">16:9 Aspect ratio</div>
   </div> -->

   <ul>

      <a href="#" class="links">
         <li class="home-ul temp" id="219">
            <img src="img/Luncheon Cover1.jpg" alt="Luncheon Cover1.jpg">
            <div class="textHover"></div>
            <div class="itemsText">
               <img class="child-img" src="img/LuncheonWEBLOGO.png" alt="LuncheonWEBLOGO.png">
            </div>
         </li>
      </a>
      
      <a href="#" class="links">
         <li class="home-ul temp" id="205">
            <img src="img/DSM Low24.jpg" alt="DSM Low24.jpg">
            <div class="textHover"></div>
            <div class="itemsText">
               <img class="child-img" src="img/DSM4.jpg" alt="DSM4.jpg">
            </div>
         </li>
      </a>
      
      <a href="#" class="links">
         <li class="home-ul temp" id="181">
            <img src="img/PoetsCover.jpg" alt="PoetsCover.jpg">
            <div class="textHover"></div>
            <div class="itemsText">
               <img class="child-img" src="img/BarbicanWEBLOGO.png" alt="BarbicanWEBLOGO.png">
            </div>
         </li>
      </a>
      <a href="#" class="links">
         <li class="home-ul temp" id="170">
            <img src="img/Molly Low9.jpg" alt="Molly Low9.jpg">
            <div class="textHover"></div>
            <div class="itemsText">
               <img class="child-img" src="img/MOLLYLOGO.jpg" alt="MOLLYLOGO.jpg">
            </div>
         </li>
      </a>
      <a href="#" class="links">
         <li class="home-ul temp" id="158">
            <img src="img/Burberry Low3.jpg" alt="Burberry Low3.jpg">
            <div class="textHover"></div>
            <div class="itemsText">
               <img class="child-img" src="img/BURBERRYWEBLOGO.png" alt="BURBERRYWEBLOGO.png">
            </div>
         </li>
      </a>
      <a href="#" class="links">
         <li class="home-ul temp" id="134">
            <img src="img/OffWhite LOW1.jpg" alt="OffWhite LOW1.jpg">
            <div class="textHover"></div>
            <div class="itemsText">
               <img class="child-img" src="img/off1.png" alt="off1.png">
            </div>
         </li>
      </a>
      <a href="#" class="links">
         <li class="home-ul temp" id="129">
            <img src="img/Landscapes-10.jpg" alt="Landscapes-10.jpg">
            <div class="textHover"></div>
            <div class="itemsText">
               <p>Untitled 2 </p>
            </div>
         </li>
      </a>
      <a href="#" class="links">
         <li class="home-ul temp" id="123">
            <img src="img/Bobbi-Kappa Low3.jpg" alt="Bobbi-Kappa Low3.jpg">
            <div class="textHover"></div>
            <div class="itemsText">
               <p>Bobbi Kappa </p>
            </div>
         </li>
      </a>
      <a href="#" class="links">
         <li class="home-ul temp" id="122">
            <img src="img/People-1.jpg" alt="People-1.jpg">
            <div class="textHover"></div>
            <div class="itemsText">
               <p>Untitled 1 </p>
            </div>
         </li>
      </a>
   </ul>

</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/belcurv/aspect-ratios-Qgorqd */
.container {
   background-color: red;
   position: relative;
   width: 100%;
   padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.text {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   text-align: center;
   font-size: 20px;
   color: white;
}

Comments