responsive
CSS Aspect Ratio Box
Maintain a fixed aspect ratio for any element using the modern aspect-ratio property.
The aspect-ratio property makes it trivial to keep elements at a fixed width-to-height ratio as they resize. Before this property, developers used the padding-top percentage hack. aspect-ratio is now supported in all modern browsers and should be the default approach for images, video embeds, cards, and responsive containers.
Usage Note
aspect-ratio works on block and flex/grid items. For images, also set object-fit: cover to fill the space without distortion. The width: 100% on the container makes it responsive — height is computed from the ratio automatically.
Tags
#aspect-ratio#responsive#image#video#container#ratio