public/vendors/bulma/sass/elements/image.sass

   1 $dimensions: 16 24 32 48 64 96 128 !default
   2
   3 .image
   4   display: block
   5   position: relative
   6   img
   7     display: block
   8     height: auto
   9     width: 100%
  10     &.is-rounded
  11       border-radius: $radius-rounded
  12   &.is-fullwidth
  13     width: 100%
  14   // Ratio
  15   &.is-square,
  16   &.is-1by1,
  17   &.is-5by4,
  18   &.is-4by3,
  19   &.is-3by2,
  20   &.is-5by3,
  21   &.is-16by9,
  22   &.is-2by1,
  23   &.is-3by1,
  24   &.is-4by5,
  25   &.is-3by4,
  26   &.is-2by3,
  27   &.is-3by5,
  28   &.is-9by16,
  29   &.is-1by2,
  30   &.is-1by3
  31     img,
  32     .has-ratio
  33       @extend %overlay
  34       height: 100%
  35       width: 100%
  36   &.is-square,
  37   &.is-1by1
  38     padding-top: 100%
  39   &.is-5by4
  40     padding-top: 80%
  41   &.is-4by3
  42     padding-top: 75%
  43   &.is-3by2
  44     padding-top: 66.6666%
  45   &.is-5by3
  46     padding-top: 60%
  47   &.is-16by9
  48     padding-top: 56.25%
  49   &.is-2by1
  50     padding-top: 50%
  51   &.is-3by1
  52     padding-top: 33.3333%
  53   &.is-4by5
  54     padding-top: 125%
  55   &.is-3by4
  56     padding-top: 133.3333%
  57   &.is-2by3
  58     padding-top: 150%
  59   &.is-3by5
  60     padding-top: 166.6666%
  61   &.is-9by16
  62     padding-top: 177.7777%
  63   &.is-1by2
  64     padding-top: 200%
  65   &.is-1by3
  66     padding-top: 300%
  67   // Sizes
  68   @each $dimension in $dimensions
  69     &.is-#{$dimension}x#{$dimension}
  70       height: $dimension * 1px
  71       width: $dimension * 1px