CSS - Proportional Box Scaling Techniques

In this example below you will see how to do a CSS - Proportional Box Scaling Techniques with some HTML / CSS and Javascript

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

<head>
  <meta charset="UTF-8">
  <title>CSS - Proportional Box Scaling Techniques </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="main">
<h1>Proportional box scaling techniques</h1>

  <!-- =============1============== -->

  <p>
    1. Padding-bottom and container element. Text and image content can be applied with an absolute position pseudo element. Longer Text spills out. 
  </p>
  
  <div class="box-outer">
    <div class="box-aspectratio  --1">
      <div class="content">Lorem ipsum dolor, sit amet consbitis exercitationem corrupti at excepturi  consec</div>
    </div>
  </div>
  
  <!-- ===========2============ -->
  
  <p>
    2. Pseudo element of 1px and -1px margin-left, floated. Longer text extends the box.
  </p>
  
  <div class="box-outer">
    <div class="box-aspectratio  --2">
      <div class="content">Lorem ipsum uia dolorum beatae voluptate! Debe! Lorem ipsum dolor, sit amet consec</div>
    </div>
  </div>

<!-- ==========3=========== -->

  <p>
    3. with a custom attribute and variable. (Still not standard).
  </p>
  
  <div class="box-outer">
    <div class="box-aspectratio  --3" ratio19/6>
      <div class="content">Lorem ipsum uia dolorum beatae voluptate! Debe! Lorem ipsum dolor, sit amet consec</div>
    </div>
  </div>













<div class="infos">
  <p>
    Formula: <br>
    
    <code>Width x Height  
      Width / Height
      Width : Height
      Height to Width relationship:
      Width ...... 100%
      Height .......?
      => ? = 100% * Height/Width
      or
      => ? = 100% / Width/Height
    </code>.
    
    <br>i.e. "How many times does the height fit into the width, times 100 to get the percentage.
  </p>
  <p><small>Infos</small>
  
</p>
<p>
  <a href="https://css-tricks.com/aspect-ratio-boxes/">https://css-tricks.com/aspect-ratio-boxes/</a> <br>
  <a href="https://www.bram.us/2017/06/16/aspect-ratios-in-css-are-a-hack/">https://www.bram.us/2017/06/16/aspect-ratios-in-css-are-a-hack/</a>br
  <a href="https://css-tricks.com/creating-web-type-lockup/">https://css-tricks.com/creating-web-type-lockup/</a>
  
</p>
  
  <p><small>Free images as placeholders:</small></p>
  <p><a href="https://unsplash.it/">https://unsplash.it/</a></p>
</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ingosr/css-proportional-box-scaling-techniques-PJJNpe */
.box-aspectratio {
  width: 100%;
}

/* sol 1 - padding bottom in element*/

.box-aspectratio.--1 {
  height: 0;
  padding-bottom: calc(100% * 9/16);
}

/* sol 2 - padding bottom in pseudo element */

.box-aspectratio.--2:before {
  content: "";
  height: 0;
  background: red;
  width: 1px;
  margin-left: -1px;
  padding-top: calc(100% * 9/16);
  float: left;
}
.box-aspectratio.--2:after {
  content: "";
  display: table;
  clear: both;
}

/* solution 3 - variable and custom css property. the @supports directive is used to check if the browser would be able to execute a rule. A custom property starts with "--". It can be used anywhere for an element or selector and reused in the document with a CSS variable. Best to place it in :root, which in a webbrowser is the html elemtent. 

Note: because we use the division we can easily use any kind of ratio. either the real width/height, or a fraction, or a calculate fraction (decimal number). 
*/

:root {
  --ratio-16-9: calc(16/9);
}

.box-aspectratio.--3 {
  position: relative;
}

@supports (--custom: property) {
  .box-aspectratio.--3:before {
    content: "";
    width: 1px;
    display: block;
    background: red;
    padding-top: calc(100% / var(--ratio-16-9));
  }
}

.box-aspectratio.--3 > .content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* irrelevant */
*,
*:before,
*:after {
  box-sizing: border-box;
}
.box-outer {
  border: 1px solid;
  width: 60%;
  padding: 5px;
}
.main {
  width: 60%;
  margin: 0 auto;
  border: 1px solid;
  padding: 40px;
}

code {
  display: inline-block;
  border: 2px solid;
  padding: 10px;
  white-space: pre-line;
}

.infos {
  margin-top: 100px;
}

.box-outer {
  margin-bottom: 100px;
}

.box-aspectratio {
  font-family: monospace;
  color: hsla(0, 50%, 50%, 0.6);
  background: #dedede;
}

Comments