yaffs.net Git - yaffs-website/blob - web/modules/contrib/blazy/css/components/blazy.ratio.css

   1 /**
   2  * @file
   3  * The CSS and class names below are based on Slick media for easy migration.
   4  */
   5
   6 [data-blazy],
   7 [data-blazy] * {
   8   -ms-box-sizing: border-box;
   9   -webkit-box-sizing: border-box;
  10   box-sizing: border-box;
  11 }
  12
  13 .media {
  14   position: relative;
  15 }
  16
  17 /**
  18  * Aspect ratio element wrapper. So can use dynamic/fluid ratio via JS which is
  19  * not possible using ::pseudo selector approach.
  20  */
  21 .media.media--ratio {
  22   display: block;
  23   height: 0;
  24   overflow: hidden;
  25   width: 100%;
  26 }
  27
  28 /* Allows to fix broken images with hidden elements, see slick.load.js. */
  29 .media.js-media--ratio {
  30   height: auto;
  31 }
  32
  33 /* Aspect ratio element: IMG, IFRAME, DIV. */
  34 .media--ratio .media__element {
  35   display: block;
  36   height: 100%;
  37   left: 0;
  38   position: absolute;
  39   top: 0;
  40   width: 100%;
  41   z-index: 0;
  42 }
  43
  44 /* 1:1 ratio */
  45 .media--ratio--11 {
  46   padding-bottom: 100%;
  47 }
  48
  49 /* 3:2 ratio */
  50 .media--ratio--32 {
  51   padding-bottom: 66.66%;
  52 }
  53
  54 /* 4:3 ratio */
  55 .media--ratio--43 {
  56   padding-bottom: 75%;
  57 }
  58
  59 /* 8:5 ratio */
  60 .media--ratio--85 {
  61   padding-bottom: 62.5%;
  62 }
  63
  64 /* 16:9 ratio */
  65 .media--ratio--169 {
  66   padding-bottom: 56.25%;
  67 }
  68
  69 /* Be sure to add width to the container accordingly, otherwise collapsed. */
  70 .field[data-blazy] {
  71   min-width: 50%;
  72 }