This is the fifth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Hi, I’m Banxia 👴, a sand sculptor who has just started writing. If you like my article, you can follow ➕, like 👍 and add me on wechat: FrontendPicker. We invite you to join us to learn the frontend of communication and become better engineers. Click me to explore a new world!

preface

First of all, fixed aspect ratios are common in web development, and interviews occasionally come up. My first thought might be, isn’t it easy? Just set the width to px to match the width. But the width varies? What do we usually do? I used the padding-bottom to do that. Of course, using JS to get the width of the element, and then set the height, is also a relatively simple solution. Today’s CSS, however, offers a more convenient solution: aspect-ratio. Aspect-ratio translates to aspect ratio in Chinese.

padding-top/bottom

Padding -top/bottom: margin and padding in vertical direction are computed in percentage units according to the width of the parent element.

Set the width to height ratio

I’m going to set the width of the outer div, and then I’m going to set the width of the inner div to 100%, and it has to be 100%, and then I’m going to set the height of the inner element to 0, and I’m going to set the padding-top to 75%.

Common ratios are converted as follows

1/1 = 1 = padding - top: 100% 3/4 = = padding - top: 0.75 75% two-thirds = = padding - top 0.66666: 66.67% 9/16 = 0.5625 = PADDing-top: 56.25%Copy the code
 .parent{
     width: 500px;
     height: 500px;
     background-color: aquamarine;
}
.child{
    background-color: rgb(127.223.247);
    width:100%;
    height: 0;
    padding: 0;
    padding-top:75%;
}
<div class="parent">
    <div class="child">
    </div>
</div>
Copy the code

aspect-ratio

concept

Aspect-ratio allows you to create containers that maintain aspect ratios.

compatibility

grammar

aspect-ratio: auto || <ratio>;

  • Auto is the default value


You can also set both values:

div {
  aspect-ratio: auto 1 / 1;
}
Copy the code

If both auto and

are specified, the specified ratio of width to height is preferred, but when the element itself has an aspect ratio, its own aspect ratio is used.

Common conversion

Padding-top :1; paddING-top: 0; paddING-top: 0; Padding-top: 2.5PT; paddING-top: 2.5pt; padding-top: 2.5pt; padding-top: 2.5pt 56.25% `Copy the code

Set the width to height ratio

.child {
     width: 500px;
     background-color: rgb(127, 223, 247);
     height: auto;
     aspect-ratio: 4/3;
}
<div class="child"></div>

Copy the code

The benefits of using aspect-ratio are:

  1. Instead of having a layer of divs, just specify height/width values.
  2. You can specify a height specific value, but you can’t specify a height using padding-top/bottom.
  3. You can also omit the width and height values and keep the aspect ratio by width.

vw/vh

Because vw and VH represent the percentage of Windows.

The same aspect ratio can be guaranteed if the width and height are set to the same value.

The advantage of this is that the aspect ratio is always maintained with different screen sizes. But it’s the same size. For width and height, it’s essentially a fixed value.

.child {
    background-color: aquamarine;
    width: 40vw;
    height:30vw
}
Copy the code

conclusion

In fact, there are many schemes to achieve fixed aspect ratio, and this paper briefly introduces three. Of course, aspect-ratio should be worthy of god, and it is the simplest with the most applicable scenarios. As compatibility improves, aspect-ratio will gradually replace other alternatives.