How to implement the ratio box in css

This article mainly introduces css how to achieve the ratio box, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Ratio box

To create a box with an inherent ratio, all you need to do is apply the top or bottom fill to the div:

.container {height: 0; padding-bottom: 20%; position: relative;} .container div {border: 2px dashed # ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%;}

Fill with 20% so that the height of the box is equal to 20% of its width. The sub-div maintains its aspect ratio (100% / 20% = 5:1) regardless of the width of the viewport.

Thank you for reading this article carefully. I hope the article "how to achieve the ratio box in css" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!