You are here

Home » API reference » Blazy 7

blazy.ratio.css in Blazy 7

Same filename and directory in other branches
  1. 8.2 css/components/blazy.ratio.css
  2. 8 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. /* Touch me not! */

  7. .media {

  8.   position: relative;

  9. }

  10. 

  11. /**

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

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

  14.  */

  15. .media.media--ratio {

  16.   display: block;

  17.   height: 0;

  18.   overflow: hidden;

  19.   width: 100%;

  20. }

  21. 

  22. /* Aspect ratio element: IMG, IFRAME, DIV. */

  23. .media--ratio .media__element {

  24.   display: block;

  25.   height: 100%;

  26.   left: 0;

  27.   position: absolute;

  28.   top: 0;

  29.   width: 100%;

  30.   z-index: 0;

  31.   /** Temp fix, also to fix the VIDEO element to max width, not only IMG. */

  32.   object-fit: cover;

  33. }

  34. 

  35. /* 1:1 ratio */

  36. .media--ratio--11 {

  37.   padding-bottom: 100%;

  38. }

  39. 

  40. /* 3:2 ratio */

  41. .media--ratio--32 {

  42.   padding-bottom: 66.66%;

  43. }

  44. 

  45. /* 4:3 ratio */

  46. .media--ratio--43 {

  47.   padding-bottom: 75%;

  48. }

  49. 

  50. /* 8:5 ratio */

  51. .media--ratio--85 {

  52.   padding-bottom: 62.5%;

  53. }

  54. 

  55. /* 16:9 ratio */

  56. .media--ratio--169 {

  57.   padding-bottom: 56.25%;

  58. }