Aspect ratio
←Here is an addition to the media container. The aspect ratio classes are reserving space in the page layout. This is handy for iframes or any situation you want to have full control about the media size, or have a height for a media container while the media is still loading. It comes with a set of predefined ratios. Put in any kind of content, customize it with the CSS Vars --ar-x
and --ar-y
.
Resize your browser to see that quote-text get’s cropped. Examine how you can change the default background color and work with unkown or not exactly fitting images, using the extra .cover
class. The funny faces are making use of the special radius modifier class .r-circle
.
ar_{ratio}
_aspect-ratio.scss
Different media types
↑ This an embbeded video
↑ This is text
↑ This an image
Aspect ratio presets
Covered background image
↑ Larger background-image cut out to fit into content
Covered image
↑ Larger image cut out to fit into content
Custom aspect ratio
↑ Aspect ratio works with any image size, with locally scoped CSS Vars.