Skip to content

Instantly share code, notes, and snippets.

@johnsoncodehk

johnsoncodehk/aspect-ratio.css

Created April 24, 2018 17:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save johnsoncodehk/4e28aeb6242e01eabc159f346ea14333 to your computer and use it in GitHub Desktop.
Save johnsoncodehk/4e28aeb6242e01eabc159f346ea14333 to your computer and use it in GitHub Desktop.
Download ZIP
CSS自適應長寬比
Raw
aspect-ratio.css
/* aspect-ratio */
/* <div class="aspect-ratio" style="--width: 16; --height: 9;"> */
.aspect-ratio {
position: relative;
box-sizing: border-box;
}
.aspect-ratio > * {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
}
.aspect-ratio::before {
position: relative;
display: block;
content: "";
padding-top: calc(var(--height, 1) / var(--width, 1) * 100);
box-sizing: border-box;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment