SHARE
TWEET

Untitled

a guest Aug 24th, 2019 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.   Aspect ratio utilities
  3.  
  4.   Note: the fallback adds a black background with the image in the middle.
  5. */
  6. .aspect-ratio-1\:1          { padding-top: 100%;                       }
  7. .aspect-ratio-1\:2          { padding-top: calc(2/1  * 100%);          }
  8. .aspect-ratio-2\:1          { padding-top: calc(1/2  * 100%);          }
  9. .aspect-ratio-2\:3          { padding-top: calc(3/2  * 100%);          }
  10. .aspect-ratio-3\:2          { padding-top: calc(2/3  * 100%);          }
  11. .aspect-ratio-3\:4          { padding-top: calc(4/3  * 100%);          }
  12. .aspect-ratio-4\:3          { padding-top: calc(3/4  * 100%);          }
  13. .aspect-ratio-9\:16         { padding-top: calc(16/9 * 100%);          }
  14. .aspect-ratio-16\:9         { padding-top: calc(9/16 * 100%);          }
  15. .aspect-ratio-4\:3\+0\.5rem { padding-top: calc(3/4  * 100% + 0.5rem); }
  16.  
  17. [class*=aspect-ratio-] {
  18.   background-color: #212121;
  19.   display: block;
  20.   height: 0;
  21.   overflow: hidden;
  22.   position: relative;
  23.   width: 100%;
  24.   z-index: 0;
  25.   z-index: 10;
  26. }
  27.  
  28. [class*=aspect-ratio-] > * {
  29.   height: auto;
  30.   left: 50%;
  31.   position: absolute;
  32.   top: 50%;
  33.   transform: translate3d(-50%, -50%, 0);
  34.   width: 100%;
  35. }
  36.  
  37. @supports (object-fit: cover) {
  38.   [class*=aspect-ratio-] { background-color: transparent; }
  39.  
  40.   [class*=aspect-ratio-] > * {
  41.     height: 100%;
  42.     left: 0;
  43.     object-fit: cover;
  44.     top: 0;
  45.     transform: translate3d(0, 0, 0);
  46.   }
  47. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top