Constant width to height ratio
Ensures that an element with variable width
will retain a proportionate height
value.
- Apply
padding-top
on the::before
pseudo-element, making theheight
of the element equal to a percentage of itswidth
. - The proportion of
height
towidth
can be altered as necessary. For example apadding-top
of100%
will create a responsive square (1:1 ratio).
<div class="constant-width-to-height-ratio"></div>
.constant-width-to-height-ratio { background: #9C27B0; width: 50%; } .constant-width-to-height-ratio::before { content: ''; padding-top: 100%; float: left; } .constant-width-to-height-ratio::after { content: ''; display: block; clear: both; }