There are many ways to define a fixed aspect ratio on an element such as a div, here are 2 examples:

1. Utilizing the CSS property aspect-ratio

div {
  aspect-ratio: 1 / 1;
  width: 50%;
  background: teal;
}

<div>aspect-ratio: 1 / 1;</div>

This method is straightforward and versatile. It explicitly sets a fixed width to height (or height to width) aspect ratio for an element. This means you can also specify an aspect ratio based on the element's height.
It does not depend on the parent width (like the padding technique) or the viewport size (like using the vw unit), it depends solely on the element's own width or height More details on MDN. That's what makes it more powerful compared to other solutions.

This is a modern feature introduced in 2021. All modern browsers support it, refer to caniuse for specific browser support.

Here are some examples with various aspect ratios :

.ar-1-1  {aspect-ratio: 1 / 1;}
.ar-3-2  {aspect-ratio: 3 / 2;}
.ar-4-3  {aspect-ratio: 4 / 3;}
.ar-16-9 {aspect-ratio: 16 / 9;}
.ar-2-3  {aspect-ratio: 2 / 3;}
.ar-3-4  {aspect-ratio: 3 / 4;}
.ar-9-16 {aspect-ratio: 9 / 16;}


/** For demonstration purposes : **/
body {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
}
div {
  background: teal;
  width: 23%;
  margin:1%;
  padding:20px 0;
  box-sizing: border-box;
  color:#fff;
  text-align:center;
}

<div class="ar-1-1">aspect-ratio: 1 / 1;</div>
<div class="ar-3-2">aspect-ratio: 3 / 2;</div>
<div class="ar-4-3">aspect-ratio: 4 / 3;</div>
<div class="ar-16-9">aspect-ratio: 16 / 9;</div>
<div class="ar-2-3">aspect-ratio: 2 / 3;</div>
<div class="ar-3-4">aspect-ratio: 3 / 4;</div>
<div class="ar-9-16">aspect-ratio: 9 / 16;</div>

2. Using vw units:

You can employ vw units for both the width and height of the element. This allows the aspect ratio of the element to be maintained, based on the viewport width.

vw : 1/100th of the width of the viewport. [MDN]

Alternatively, you can also utilize vh for viewport height, or even vmin/vmax to use the lesser/greater of the viewport dimensions (discussion here).

Example: 1:1 aspect ratio

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

For other aspect ratios, you can refer to the following table to calculate the value for height based on the width of the element:

aspect ratio  | multiply width by
-----------------------------------
     1:1      | 1
     1:3      | 3
     4:3      | 0.75
    16:9      | 0.5625

Example: 4x4 grid of square divs

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

Here is a Fiddle with this demo and here is a solution to create a responsive grid of squares with vertically and horizontally centered content.

Browser support for vh/vw units is IE9+, refer to canIuse for more information

Employ the aspect-ratio CSS style attribute

<div class='sample'></div>

.sample {
  background: blue;
  width: 600px;
  aspect-ratio: 16/9;
}

This response was drafted prior to the introduction of aspect-ratio in CSS. This is the recommended approach today.

Initial reply

I came across what I believe to be an ingenious resolution for this issue, utilizing <svg> and display:grid.

A display:grid container allows you to fill the same area with two (or more) of its child elements by using the same grid-area.
What this means is that they all flow together, overlap, and by default, the taller one determines the ratio.

One of them will be an <svg> responsible for setting the ratio. The other one will hold the actual content. If the actual content is brief and never fills up the entire ratio (and you simply want it centered within a space with this ratio), just center it (refer to the first runnable snippet below).

<div class="ratio">
  <svg viewBox="0 0 1 1"></svg>
  <div>
    I'm square
  </div>
</div>

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1;
}

Adjust the ratio of the <svg> as needed:

• <svg viewBox="0 0 4 3"></svg>

• <svg viewBox="0 0 16 9"></svg>

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1;
}

/* the following code is NOT necessary for setting the ratio 
 * It's designed for visual distinction
 * and content alignment.
 */
.ratio div {
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="ratio">
  <svg viewBox="0 0 7 1"></svg>
  <div>
    Fixed ratio 7:1
  </div>
</div>

If you require a solution where the content element has substantial content that you wish to confine into a scrollable region with the desired ratio, set position:relative on the parent and

position:absolute; height:100%; overflow-y: auto;

.ratio {
  display: grid;
  position: relative;
}
.ratio > * {
  grid-area: 1/1;
}


.ratio > div {
  height: 100%;
  overflow-y: auto;
  position: absolute;
  
  /* the rest is not required */
  border: 1px solid red;
  padding: 0 1rem;
}

<div class="ratio">
  <svg viewBox="0 0 7 2"></svg>
  <div>
    <h1>Fixed ratio 7:2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ...
  </div>
</div>

As @emjay pointed out in a comment below, the ratio svg can be placed in one of the parent's pseudo-elements, as long as it's correctly encoded:

.three-squares {
  display: grid;
  border: 1px solid red;
}

.three-squares > *, .three-squares:before {
  grid-area: 1/1;
}

.three-squares:before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1'%3E%3C/svg%3E");
  line-height: 0;
}

<div class="three-squares">  
  <div>I'm 3:1</div>
</div>

When utilized within a pseudo-element, the <svg> becomes a replaced element which, by default, rests on a baseline of varying heights (4px in Chrome, 3.5px in Firefox). The height of the baseline changes based on line-height, which is why we need to specify line-height: 0 on the pseudo element to achieve an accurate ratio. More information can be found here.

Personally, I prefer the version where the <svg> is included in the markup, as it allows for a single class (.ratio) to manage containers of various ratios (instead of needing a class for each specific ratio I might require).

After experimenting with CSS, I discovered a technique that allows embedding videos with a consistent aspect ratio in a responsive web design layout. It's essential to note that this method may require adjustments based on the specific flow of your website.

Assuming you have an embedded video structured like this:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

You can enclose this content within a div element assigned a "video" class. This "video" class will serve as the flexible container in your layout, resizing in width according to the responsiveness of your website. Essentially, this div element is where you'll aim to embed the video while preserving its aspect ratio.

To achieve this, I introduced an image preceding the embedded object inside the "video" div. The crucial part here is ensuring the image has the correct aspect ratio you want to maintain. Additionally, make sure the image size is at least as large as the smallest dimensions you anticipate for the video or content you're keeping the aspect ratio of. This precaution prevents resolution issues when the image is resized proportionally. For example, if you intend to maintain a 3:2 aspect ratio, avoid using a tiny 3px by 2px image.

I recommend establishing a minimum width for fluid elements in your website to prevent layout distortions at smaller browser sizes. A good rule of thumb is setting this threshold around ~600px, considering standard screen resolutions. Including fixed-width columns, this ensures a scroll bar appears before elements start overlapping or getting cut off.

In my implementation, I used a transparent png image, though the specific image type likely isn't critical if done correctly:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

The corresponding CSS styles could be something like this:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

Ensure any explicit width or height declarations within the object and embed tags are removed to align with this styling approach.

This technique leverages the positioning properties of the "video" class element and the item you wish to maintain an aspect ratio for. By capitalizing on how images retain their aspect ratios when resized, it instructs other content within the "video" class element to fill the available space allotted by the dynamic image effectively.

It may require some tweaking to fit seamlessly into your design, but overall, this method has worked remarkably well for me. The core concept remains universal.

Elliot's ingenious idea sparked my inspiration for this unique solution:

aspectratio.png is a PNG file that is completely transparent and customized to match your desired aspect ratio, like mine which measures 30x10 pixels.

HTML Code

<div class="eyecatcher">
  <img src="/img/aspectratio.png"/>
</div>

CSS3 Styling

.eyecatcher img {
  width: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url(../img/autoresized-picture.jpg);
}

Important Note: The background-size property is a CSS3 feature that may not be compatible with all web browsers. It is recommended to verify interoperability using resources like caniuse.com.

Building upon @web-tiki's method utilizing vh/vw, I have also devised a way to center content on the screen specifically for a 9:16 portrait orientation.

.container {
  width: 100vw;
  height: calc(100vw * 16 / 9);
  transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}

The use of translateY maintains the central alignment on the screen. The calculation calc(100vw * 16 / 9) determines the expected height ratio of 9/16, while (100vw * 16 / 9 - 100vh) calculates the overflow height, resulting in pulling up overflow height/2 to keep it centered on the screen.

For landscape orientation maintaining a 16:9 aspect ratio:

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

The flexibility of the 9/16 ratio allows for easy adjustments without the need for predefined values like 100:56.25 or 100:75. If prioritizing height adjustment first, a simple switch of width and height is sufficient - e.g.

height:100vh;width: calc(100vh * 9 / 16)

To cater to varying screen sizes, you may find interest in:

• background-size cover/contain
  • This style resembles 'contain' option based on the width-to-height ratio.
• object-fit
  • Implementing cover/contain options for image/video tags.
• @media (orientation: portrait)/@media (orientation: landscape)
  • Utilizing media queries to adjust ratios for portrait/landscape.

According to the information provided in this article on w3schools.com and also mentioned in this accepted answer, when using padding values as percentages, it is important to note that they are calculated based on the width of the containing element:

This means that the specified padding is a percentage of the containing element's width.

Therefore, an example of a properly responsive DIV maintaining a 16:9 aspect ratio would look like the following:

CSS

.parent {
    position: relative;
    width: 100%;
}
.child {
    position: relative;
    padding-bottom: calc(100% * 9 / 16);
}
.child > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

HTML

<div class="parent">
    <div class="child">
        <div>Aspect is maintained even during resizing</div>
    </div>
</div>

Check out the live demo on JSFiddle

To achieve a specific aspect ratio in your design, you can make use of the CSS property called aspect-ratio

Discover more about aspect-ratio compatibility here

Learn how to implement aspect-ratio effectively

If you want to see a simple example of using aspect-ratio, check out this easy-to-follow snippet below

.yourClass {
   aspect-ratio: 16/9;
}

Building upon Web_Designer's response, the <div> will acquire a height (solely composed of bottom padding) equal to 75% of the width of its containing element. For further insights, check out this informative link: . The reasoning behind this particular design choice is still somewhat unclear.

If you desire your div to possess a width other than 100%, you must implement an additional wrapping div where the width can be specified:

div.ar-outer{
    width: 60%; /* container; any desired width */
    margin: 0 auto; /* centered alignment if preferred */
}
div.ar {
    width:100%; /* equivalent to 100% of the container's width */
    padding-bottom: 75%; /* adjusts to 75% of the container's width */
    position:relative;
}
div.ar-inner {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
}

I recently applied a technique similar to Elliot's image strategy, allowing CSS media queries to deliver distinct logo files based on varying device resolutions while maintaining proportional scaling as an <img> typically would (I designated the logo as a background image on a transparent .png file with the proper aspect ratio). Nevertheless, utilizing Web_Designer's approach could potentially eliminate the need for an additional http request.

This revision builds upon the solution provided by web_designer:

• Utilizes pseudo elements in place of wrapper divs
• The aspect ratio now depends on the box's width rather than its parent
• The box will expand vertically as the content grows taller

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}

<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50<16:9</div>

To create a responsive design using an SVG, you can set the container or wrapper's position to relative. Place the SVG as statically positioned within the container and then add absolutely positioned content with properties like top: 0; left: 0; right: 0; bottom: 0;

For example, if you want to maintain a 16:9 aspect ratio:

Consider the image.svg file (which can be included inline in src attribute):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>

Apply the following CSS styles:

.container {
  position: relative;
}
.content {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

Use the following HTML structure:

<div class="container">
  <img style="width: 100%" src="image.svg" />
  <div class="content"></div>
</div>

If you encounter issues with inline SVG, you can encode the SVG and embed it in the img src attribute like this:

<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />

This is my method :

[data-aspect-ratio] {
    display: block;
    max-width: 100%;
    position: relative;
}

[data-aspect-ratio]:before {
    content: '';
    display: block;
}

[data-aspect-ratio] > * {
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
[data-aspect-ratio="5:1"]:before {
    padding-top: 20%;
}
[data-aspect-ratio="2:1"]:before {
    padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
    padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
    padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
    padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
    padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
    padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
    padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
    padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
    padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
    padding-top: 300%;
}

For instance :

<div data-aspect-ratio="16:9"><iframe ...></iframe></div>

origin

After analyzing your suggestions, I have come up with a clever trick:

By implementing this solution, your HTML code will be simplified to:

<div data-keep-ratio="75%">
    <div>Main content</div>
</div>

To achieve this, follow these steps: CSS:

*[data-keep-ratio] {
    display: block;
    width: 100%;
    position: relative;
}
*[data-keep-ratio] > * {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

and JavaScript (using jQuery):

$('*[data-keep-ratio]').each(function(){ 
    var ratio = $(this).data('keep-ratio');
    $(this).css('padding-bottom', ratio);
});

Simply assign the desired height/width value to the data-keep-ratio attribute and you're good to go.

Using Grid and pseudo element padding for creative layout

A unique approach has been discovered to tackle this particular scenario. This innovative solution is an evolution of the traditional padding-bottom technique, omitting the need for any child elements with position: absolute, instead utilizing display: grid; in combination with a pseudo element.

The key lies in the implementation of .ratio::before featuring padding-bottom: XX% and grid-area: 1 / 1 / 1 / 1;, strategically placing the pseudo element within the grid structure. To prevent overflow conflicts, width: 0; is set to maintain harmony between the main element and the pseudo element's dimensions.

Furthermore, the primary element .ratio > *:first-child mirrors the position of .ratio::before with grid-area: 1 / 1 / 1 / 1;, allocating them both the same grid cell space. With this configuration, any content can be added to the div while the pseudo element dictates the width/height ratio. Explore more about grid-area.

.ratio {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 200px; /* adjustable based on requirements */  
}

.ratio::before {
  content: '';
  width: 0;
  padding-bottom: calc(100% / (16/9)); /* customize ratio as needed */
  grid-area: 1 / 1 / 1 / 1;
}

.ratio>*:first-child {
  grid-area: 1 / 1 / 1 / 1; /* matching ::before */
  background: rgba(0, 0, 0, 0.1); /* visual aid */
}

<div class="ratio">
  <div>16/9</div>
</div>

For greater flexibility, CSS variables can be used to define ratios directly in HTML via the style attribute. This method seamlessly integrates with display: inline-grid.

.ratio {
  display: inline-grid;
  grid-template-columns: 1fr;
  width: 200px; /* adaptable sizing */ 
  margin-right: 10px; /* spacing example */
}

.ratio::before {
  content: '';
  width: 0;
  padding-bottom: calc(100% / (var(--r))); /* customizable ratio */
  grid-area: 1 / 1 / 1 / 1;
}

.ratio>*:first-child {
  grid-area: 1 / 1 / 1 / 1; /* aligns with ::before */
  background: rgba(0, 0, 0, 0.1); /* stylistic addition */
}

<div class="ratio" style="--r: 4/3;">
  <div>4/3</div>
</div>

<div class="ratio" style="--r: 16/9;">
  <div>16/9</div>
</div>

Although many answers out there are impressive, a lot of them require an image that's already correctly sized... Other solutions only focus on width and neglect the available height, but sometimes you want to fit the content within a specific height as well.

I've attempted to merge these ideas together to create a fully adaptable and resizable solution... The key is to utilize the auto-scaling feature of an image while using an inline svg element instead of relying on a pre-rendered image or making a secondary HTTP request...

div.holder{
  background-color:red;
  display:inline-block;
  height:100px;
  width:400px;
}
svg, img{
  background-color:blue;
  display:block;
  height:auto;
  width:auto;
  max-width:100%;
  max-height:100%;
}
.content_sizer{
  position:relative;
  display:inline-block;
  height:100%;
}
.content{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background-color:rgba(155,255,0,0.5);
}

<div class="holder">
  <div class="content_sizer">
    <svg width=10000 height=5000 />
    <div class="content">
    </div>
  </div>
</div>

It's worth noting that in the example, I used large values for the width and height attributes of the SVG to ensure it can shrink down appropriately. This example creates a div ratio of 10:5.

To ensure a square fits perfectly inside the viewport in both portrait and landscape views without any parts sticking out, you can switch between using vw and vh based on the orientation of the device:

@media (orientation:portrait ) {
  .square {
    width :100vw;
    height:100vw;
  }
} 
@media (orientation:landscape) {
  .square {
    width :100vh;
    height:100vh;
  }
} 

If you want to achieve this effect, consider using SVG graphics.

Depending on the situation, utilizing SVG can be incredibly beneficial. For instance, you can easily set a background-image without specifying a fixed height, or use it for embedding YouTube videos with a <iframe> and maintaining a ratio of 16:9, along with using position:absolute.

To maintain a 3:2 aspect ratio, simply include viewBox="0 0 3 2" in your SVG code.

Here is an example:

div{
    background-color:red
}
svg{
    width:100%;
    display:block;
    visibility:hidden
}

.demo-1{width:35%}
.demo-2{width:20%}

<div class="demo-1">
  <svg viewBox="0 0 3 2"></svg>
</div>

<hr>

<div class="demo-2">
  <svg viewBox="0 0 3 2"></svg>
</div>

Here is my innovative solution for creating a responsive image container with a specific aspect ratio, without the need for using background or inline styles. The width of the container is set at 100%, ensuring that it scales perfectly on any device.

.wrapper {
  width: 50%;
}

.image-container {
  position: relative;
  width: 100%;
}

.image-container::before {
  content: "";
  display: block;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio-4-3::before {
  padding-top: 75%;
}

.ratio-3-1::before {
  padding-top: calc(100% / 3);
}

.ratio-2-1::before {
  padding-top: 50%;
}

<div class="wrapper"> <!-- Just to make things a bit smaller -->
  <p>
  Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
  </p>
  <div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
    <img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
  </div>
  <p>
  Just place other block elements around it; it will work just fine.
  </p>
</div>

If you have a container div and an inner div that needs to maintain its ratio (such as an image or YouTube iframe), the HTML structure would look like this:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->
</div><!-- end of container -->

To keep the ratio of the "element" at 4 to 1 or 2 to 1, the CSS code would be as follows:

.container{
  position: relative;
  height: 0;
  padding-bottom: 75%; /* for 4 to 3 ratio */ 
}

.element{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  background: red; /* just for illustration */
}

When specifying padding in percentage, it is based on the width rather than the height. This ensures that the height will always be calculated based on the width, maintaining the desired ratio.

An effective method for maintaining aspect ratio using the canvas element.

Test out the div below by resizing it to witness the technique in action.

This strategy has proven to be most efficient for me, so I am eager to share it with others who can benefit from its simplicity.

.cont {
  border: 5px solid blue;
  position: relative;
  width: 300px;
  padding: 0;
  margin: 5px;
  resize: horizontal;
  overflow: hidden;
}

.ratio {
  width: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

This technique also supports dynamic height adjustments!

.cont {
  border: 5px solid blue;
  position: relative;
  height: 170px;
  padding: 0;
  margin: 5px;
  resize: vertical;
  overflow: hidden;
  display: inline-block; /* so the div doesn't automatically expand to max width */
}

.ratio {
  height: 100%;
  margin: 0;
  display: block;
}

.content {
  background-color: rgba(255, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

<div class="cont">
  <canvas class="ratio" width="16" height="9"></canvas>
  <div class="content">I am 16:9</div>
</div>

Simply a thought or a creative solution.

div {
  background-color: blue;
  width: 10%;
  transition: background-color 0.5s, width 0.5s;
  font-size: 0;
}

div:hover {
  width: 20%;
  background-color: red;
}
  
img {
  width: 100%;
  height: auto;
  visibility: hidden;
}

<div>
  <!-- Include an image with the desired aspect ratio. For example, a square -->
  <img src="http://i.imgur.com/9OPnZNk.png" />
</div>

Chrome 88 has introduced a new CSS property called aspect-ratio, which will soon be available in other browsers as well.

The aspect-ratio CSS property defines the preferred aspect ratio for a box, influencing auto sizes and various layout calculations.

Check out this CSS Tricks article for more insights.

For additional information on the aspect-ratio property, visit this link.

div {
  background: rebeccapurple;
  height:100px;
  margin:1em auto;
}

.square {
  aspect-ratio: 1 / 1;
  }

<div class="square">
  
</div>

There is a new CSS property called aspect-ratio that can be used for this purpose.

More information here

@supports (aspect-ratio: 1 / 1) {
  div {
    aspect-ratio: 16 / 9;
    background-color: orange;
  }  
}

<div style="width: 200px"></div>
<hr />
<div style="width: 400px"></div>
<hr />
<div style="height: 50px"></div>
<hr />
<div style="height: 10px"></div>

From version V88, Chrome and Edge fully support this property, while Firefox provides support behind a flag since V81 (set layout.css.aspect-ratio.enabled to true in about:config).

To check compatibility information, visit this link

Implementing the new aspect-ratio tag seemed like a great idea at first, but unfortunately, it caused some issues with the positioning of my div elements. The common workaround of using padding on a wrapper div did help to an extent, however, it only resized based on the width of the parent or viewport, leading to challenges especially when the height was the determining factor.

Upon discovering the min() function, I was able to modify the traditional technique in the following manner:

body{
    background-image: linear-gradient(to top right, #FFE6B5, #B3CEBF);
    padding: 0;
    margin: 0 auto;
    overflow-y: hidden; /* this is to avoid scrolling when the height of the viewport is less than what the aspect ratio requires */
}

.wrapper {
    position: relative;
    width: 100vw;
    max-height: 100vh;
}
.sixteen-by-nine.aspect-ratio { 
    padding-bottom: 56.25% /* 9:16 ratio */
}
.content {
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    background-color: green
}

.centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: min(177.8vh, 100%); /* this always keeps a 16:9 ratio within the viewport */
    font-size: min(3vh,1.7vw); /* if you are also interested in scaling the font size */
    background-color: blue
}

<body>
  <div class="wrapper">
    <div class="sixteen-by-nine aspect-ratio"></div>
    <div class="content" >
      <div class="centered">
        <!-- stuff goes here -->
      </div>
    </div>
  </div>
</body>

If you prefer to keep the width at 100px and the height at 50px (i.e., in a 2:1 ratio), you can easily calculate it like this:

.pb-2to1 {
  padding-bottom: calc(50 / 100 * 100%); // which equals a 2:1 ratio
}

Recently, I successfully designed a responsive div with a 4:3 aspect ratio that dynamically adjusts to the full width of the window while preventing overflow at the top or bottom edges. Keep in mind that this resizing technique is dependent on the window size and not the parent container.

#viewport {
    position: absolute;
    top: 50vh;
    left: 50vw;
    width: 100vw;
    height: 75vw;
    max-height: 100vh;
    max-width: calc(100vh * 1.333);
    transform: translate(-50%, -50%);
}

If you need to adjust the dimensions for a different aspect ratio like 5:4, simply calculate the appropriate percentages for your CSS code instead of using the existing values for 4:3.

I decided to try out a fresh approach.

.squares{
  width: 30vw
  height: 30vw

Focusing on maintaining the correct aspect ratio

.aspect-ratio
  width: 10vw
  height: 10vh

Instead of using fixed values, I used percentages relative to the viewport. For example, if you want a div that takes up 30% of the viewport width, you can simply use 30vw instead. By knowing the width, you can also calculate and set the height using 'calc' and the vw unit.

Discover my innovative method for maintaining a perfect 16:9 aspect ratio whether in portrait or landscape mode using a div with customizable fixed margins.

This technique involves a clever combination of width/height and max-width/max-height properties utilizing vw units for flexibility.

In the example provided, I have added 50px top and bottom margins that appear on hover.

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.fixedRatio {
  max-width: 100vw;
  max-height: calc(9 / 16 * 100vw);
  width: calc(16 / 9 * 100vh);
  height: 100vh;
  
  /* DEBUG */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  font-size: 2rem;
  font-family: 'Arial';
  color: white;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out; 
}

.fixedRatio:hover {
  width: calc(16 / 9 * (100vh - 100px));
  height: calc(100vh - 100px);
}

<div class='container'>
  <div class='fixedRatio'>
    16:9
  </div>
</div>

Check out the JSFiddle to see it in action!

Using rem or em can solve the issue of a fixed ratio not being bound to the screen like vw or vh, or as difficult to work with in flexbox as %. Unfortunately, none of the solutions provided worked for me, but I found a workaround that suited my needs:

<div class="container">
   <div>
   </div>
</div>

.container {
   height: 100vh;
   width: 100vw;
}
.container div {
   height: 4em;
   width: 3em;
}

Alternatively, you can also use rem instead. Either one should do the trick.
rem uses the default font-size value while em uses the closest font-size.