image.sass 1.2 KB

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