This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_uc.css, line 8053

6.1 Aspect Ratio

Aspect Ratio lets you define the ratio of width to height of the container. This is a great utility for images, videos, icons and layouts that need to conform to a ratio shape as it responds. It will set the object to 100% width of the container.

classcss propertyvalue
.aspect_8x10 aspect-ratio : 8 / 10
.aspect_1x1 aspect-ratio : 1 / 1
.aspect_2x1 aspect-ratio : 2 / 1
.aspect_4x3 aspect-ratio : 4 / 3
.aspect_3x4 aspect-ratio : 3 / 4
.aspect_3x2 aspect-ratio : 3 / 2
.aspect_16x9 aspect-ratio : 16 / 9
.aspect_21x9 aspect-ratio : 21 / 9
.aspect_4x1 aspect-ratio : 4 / 1
.aspect_leaderboard aspect-ratio : 728 / 90
.aspect_skyscraper aspect-ratio : 160 / 600
.aspect_bigbox aspect-ratio : 300 / 250
.aspect_billboard aspect-ratio : 970 / 250