Use Aspect Ratio

In this article, we're going to discuss how to use the aspect ratio control.

This new control added in Cornerstone 7.7.0+ allows you to control the size of an element via width and height aspect.

The Aspect Ratio control takes two values: a number (the aspect ratio) followed by / and another number (the denominator). For example, if you want an image or container with a 16:9 aspect ratio, you would use aspect-ratio: 16/9. This tells the browser to maintain this specific width-to-height proportion when rendering the element. The actual dimensions of the element will depend on its parent's size and any other layout constraints.

Using auto in conjunction with an aspect ratio (Example auto 16/9) is a convenient way to ensure your content remains proportional, even when its size changes due to different screen sizes or responsive design. If you have a container element with an Aspect Ratio of auto 16/9 and it's placed inside another element that has some width and height values, the browser will scale the content to fit within those dimensions while maintaining a 16:9 aspect ratio.

Aspect Ratio Control

See something inaccurate? Let us know