Maintain aspect ratio while keeping 100% width of fluid container

Asked
Active3 hr before
Viewed126 times

9 Answers

aspectratiomaintain
90%

Try this as a starting structure. The video container is full responsive 16:9 with and without the <video> tag. Let me know if it's not what you expected.,On small screens the left and right column will stack, meaning that on small screens the video is on top of the sidebar.,Connect and share knowledge within a single location that is structured and easy to search.

Try this as a starting structure. The video container is full responsive 16:9 with and without the <video> tag. Let me know if it's not what you expected.

<div class="parentContainer">
   <header class="searchBar">
      <br>search<br><br>
   </header>
   <div class="rowContainer">
      <main class="videoContainer">
         <div class="video">
            video 16:9
            <!-- <video width="480" height="270" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video> -->
         </div>
         <div class="video-title">
            Title of the video
         </div>
      </main>
      <aside class="sidebarContainer">
         <br>Sidebar<br><br>
      </aside>
   </div>
   <footer class="bottomContainer">
      <br>bottom<br><br>
   </footer>
</div>

with css code width & height 100% (or 100vw & 100vh)

*, *::before, *::after {
   box - sizing: border - box;
}
html, body {
   height: 100 % ;
}
body {
   margin: 0;
   font: 400 1 rem / 1.5 sans - serif;
}
header, main, aside, footer {
   display: block;
}
.parentContainer {
   height: 100 % ;
   overflow: hidden;
}
.rowContainer {
   display: flex;
}
.sidebarContainer {
   flex: 0 0 25 % ;
   width: 25 % ;
}
.videoContainer {
   flex: 0 0 75 % ;
   width: 75 % ;
}
.video {
   position: relative;
   display: block;
   width: 100 % ;
   padding: 0;
   overflow: hidden;
}
.video::before {
      display: block;
      content: "";
      padding - top: 56.25 % ; /* 9:16 */
   }
   .video video {
      position: absolute;
      top: 0;bottom: 0;left: 0;
      width: 100 % ;
      height: 100 % ;
      border: 0;
   }
   .parentContainer {
      background - color: lightgreen;
   }
   .searchBar {
      background - color: yellow;
   }
   .videoContainer {
      background - color: silver;
   }
   .video - title {
      background - color: lightgrey;
   }
   .sidebarContainer {
      background - color: pink;
   }
load more v
88%

In each of these video-embedding scenarios, it is very common for a static width and height to be declared.,There is a clever adaptation of this that allows you to adjust the aspect ratio right from the HTML, like:,But how do I fix this, when using display:flex; and want 3 videoes side by side in a section? As soon as I have more than 1 video, the video fills up the entire height of the container so the aspect ration changes?

In each of these video-embedding scenarios, it is very common for a static width and height to be declared.

<video width="400" height="300" controls ...></video>

<iframe width="400" height="300" ...></iframe>

<!-- maybe even super old school -->
<object width="400" height="300" ... />
<embed width="400" height="300" ... />

So can’t we just do this?

<video width="100%" ...></video>

You can get there via CSS (and not worry about what’s declared in the HTML) like this:

video {
   /* override other styles to make responsive */
   width: 100 % !important;
   height: auto!important;
}

Fortunately, there are a couple of possible solutions here. One of them was pioneered by Thierry Koblentz and presented on A List Apart in 2009: Creating Intrinsic Ratios for Video. With this technique, you wrap the video in another element which has an intrinsic aspect ratio, then absolute position the video within that. That gives us fluid width with a reasonable height we can count on.

<div class="videoWrapper">
   <!-- Copy & Pasted from YouTube -->
   <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
.videoWrapper {
   position: relative;
   padding - bottom: 56.25 % ; /* 16:9 */
   height: 0;
}
.videoWrapper iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100 % ;
   height: 100 % ;
}

There is a clever adaptation of this that allows you to adjust the aspect ratio right from the HTML, like:

<div class="videoWrapper" style="--aspect-ratio: 3 / 4;">
   <iframe ...>
.videoWrapper {
   ...
   /* falls back to 16/9, but otherwise uses ratio from HTML */
   padding - bottom: calc(var (--aspect - ratio, .5625) * 100 % );
}

Some old school video embedding uses <object> and <embed> tags, so if you’re trying to be comprehensive, update that wrapper selector to:

.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {}

Imagine this: when the page loads all videos are looked at and their aspect ratio is saved. Once right away, and whenever the window is resized, all the videos are resized to fill the available width and maintain their aspect ratio. Using the jQuery JavaScript Library, that looks like this:

// Find all YouTube videos
// Expand that selector for Vimeo and whatever else
var $allVideos = $("iframe[src^='//www.youtube.com']"),

   // The element that is fluid width
   $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

   $(this)
      .data('aspectRatio', this.height / this.width)

      // and remove the hard coded width/height
      .removeAttr('height')
      .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

   var newWidth = $fluidEl.width();

   // Resize all videos according to their own aspect ratio
   $allVideos.each(function() {

      var $el = $(this);
      $el
         .width(newWidth)
         .height(newWidth * $el.data('aspectRatio'));

   });

   // Kick off one resize to fix all videos on page load
}).resize();
load more v
72%

Please stand by, while we are checking your browser...,Please enable Cookies and reload the page.

Pretag
 Pretag team - issue, fix, solve, resolve
65%

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.,Writing code in comment? Please use ide.geeksforgeeks.org, generate link and share the link here.,Maintain the aspect ratio of a div with CSS

In order to maintain the aspect ratio of a div with CSS create flexible elements that keep their aspect ratio (4:3, 16:9, etc.) when resize the browser window.
What is aspect ratio? 
The aspect ratio of an element describes the proportional relationship between its width and height. Two common video aspect ratios are 4:3 and 16:9.
To maintain the aspect ratio of the div add a percentage value for padding-top. Different aspect ratio have different percentage values. Some of them are shown below: 
 

aspect ratio | padding - top value
   -- -- -- -- -- -- -- | -- -- -- -- -- -- -- -- -- -- --
1: 1 | 100 %
   16: 9 | 56.25 %
   4: 3 | 75 %
   3: 2 | 66.66 %
   8: 5 | 62.5 %

Syntax: 
 

element {
   padding - top: % value;
}
load more v
75%

As you can see above, our containing element’s max-width is 1200px (max-width to allow for responsiveness). The padding-bottom in its child element is set to 56.25% to maintain a 16:9 aspect ratio when scaling.,Questions or comments? Share them below, or tweet us @Pixafy!,Services Architecture Integrations Development Design Support

HTML:

<div style=”max-width=1200px;”>

   <div style=”width:100%; padding-bottom:56.25%;”></div>

</div>
40%

Ensure this style rule applies to an image element, and...that's all there is to it., The solution we will look at is really simple. To preserve the aspect ratio, all you need to do is set the height and width CSS properties as shown:, By setting the width property to 100%, you are telling the image to take up all the horizontal space that is available. With the height property set to auto, your image's height changes proportionally with the width to ensure the aspect ratio is maintained. The end result is an image that scales up or down perfectly.

The solution we will look at is really simple. To preserve the aspect ratio, all you need to do is set the height and width CSS properties as shown:

.mySelector {
   width: 100 % ;
   height: auto;
}
load more v
22%

The traditional way to avoid this was to provide width and height attributes in the <img> markup so even when the browser has just the HTML, it is still able to allocate the appropriate amount of space. So, if we change above example to the following:,This will override the width of the image and constrain it when necessary, but if you have explicitly set the height on the image tag, then we are not overriding that (only the width) and you will end up with a stretched or squashed image, as we have no longer maintained the aspect ratio of the image:,If any one of these were not set, then the calculation would not be possible, and so would fail and be ignored and have to wait for the image to be downloaded.

Pretag
 Pretag team - issue, fix, solve, resolve
60%

Summary: Maintaining a consistent width-to-height ratio, called an aspect ratio, is critical in responsive web design and for preventing cumulative layout shift. Now, there's a more straightforward way to do this with the new aspect-ratio property launching in Chromium 88, Firefox 87, and Safari Technology Preview 118.,Now that we have identified the aspect ratio value, we can apply that to our parent container. Consider the following example:,Maintaining aspect ratio with aspect-ratio

<div class="container"> <img class="media" src="..." alt="..."></div>
load more v
48%

Pretag
 Pretag team - issue, fix, solve, resolve

Other "aspect-ratio" queries related to "Maintain aspect ratio while keeping 100% width of fluid container"