You are here

Home » API reference » Blazy 8.2

blazy.ratio.css in Blazy 8.2

Same filename and directory in other branches
  1. 8 css/components/blazy.ratio.css
  2. 7 css/components/blazy.ratio.css

The CSS and class names below are based on Slick media for easy migration.

File

css/components/blazy.ratio.css
View source 
  1. /**

  2.  * @file

  3.  * The CSS and class names below are based on Slick media for easy migration.

  4.  */

  5. 

  6. /**

  7.  * Aspect ratio element wrapper. So can use dynamic/fluid ratio via JS which is

  8.  * not possible using ::pseudo selector approach.

  9.  */

  10. .media.media--ratio {

  11.   display: block;

  12.   height: 0;

  13.   /* Fixed for overflowing video with hard-coded width like lightboxes. */

  14.   max-width: 100%;

  15.   min-height: 1px;

  16.   overflow: hidden;

  17.   position: relative;

  18.   width: 100%;

  19. }

  20. 

  21. /* Trying to be nice to minimize abrupt changes. */

  22. .media--ratio.is-b-loaded {

  23.   transition: padding-bottom .2s;

  24. }

  25. 

  26. /* 1:1 ratio */

  27. .media--ratio--11 {

  28.   padding-bottom: 100%;

  29. }

  30. 

  31. /* 3:2 ratio */

  32. .media--ratio--32 {

  33.   padding-bottom: 66.66%;

  34. }

  35. 

  36. /* 4:3 ratio */

  37. .media--ratio--43 {

  38.   padding-bottom: 75%;

  39. }

  40. 

  41. /* 8:5 ratio */

  42. .media--ratio--85 {

  43.   padding-bottom: 62.5%;

  44. }

  45. 

  46. /* 16:9 ratio */

  47. .media--ratio--169 {

  48.   padding-bottom: 56.25%;

  49. }