Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/lowmess/tachyons-print. Functional CSS for humans (and printers). www.npmjs.com/package/tachyons-print
tachyons tachyons-css
Something went wrong. Try again.
1.3 kB · 44 lines
CSS
at master
123456789101112131415161718192021222324252627282930313233343536373839404142434445/* ASPECT RATIOS*/
/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e * Make sure there are no height and width attributes on the embedded media. * Adapted from: https://github.com/suitcss/components-flex-embed * * Example: * * <div class="aspect-ratio aspect-ratio--16x9"> * <iframe class="aspect-ratio--object"></iframe> * </div> * * */
@media print { .aspect-ratio-p { height: 0; position: relative; } .aspect-ratio--16x9-p { padding-bottom: 56.25%; } .aspect-ratio--9x16-p { padding-bottom: 177.77%; } .aspect-ratio--4x3-p { padding-bottom: 75%; } .aspect-ratio--3x4-p { padding-bottom: 133.33%; } .aspect-ratio--6x4-p { padding-bottom: 66.6%; } .aspect-ratio--4x6-p { padding-bottom: 150%; } .aspect-ratio--8x5-p { padding-bottom: 62.5%; } .aspect-ratio--5x8-p { padding-bottom: 160%; } .aspect-ratio--7x5-p { padding-bottom: 71.42%; } .aspect-ratio--5x7-p { padding-bottom: 140%; } .aspect-ratio--1x1-p { padding-bottom: 100%; } .aspect-ratio--object-p { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }}