Skip to content

Instantly share code, notes, and snippets.

@fabriziofeitosa

fabriziofeitosa/Constant-width-to-height-ratio.css

Last active September 9, 2020 11:40
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 fabriziofeitosa/3d020e510e4dd8c7e3d13ac27cab24b8 to your computer and use it in GitHub Desktop.
Save fabriziofeitosa/3d020e510e4dd8c7e3d13ac27cab24b8 to your computer and use it in GitHub Desktop.
Download ZIP
(CSS) Constant width to height ratio
Raw
Constant-width-to-height-ratio.css
.constant-width-to-height-ratio {
background: #333;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: '';
padding-top: 30%;
float: left;
}
.constant-width-to-height-ratio::after {
content: '';
display: block;
clear: both;
}
@fabriziofeitosa
Copy link
Author

fabriziofeitosa commented Sep 9, 2020 •
edited

Deixa uma DIV com altura proporcional a largura.

  • Primeiro é definida a largura
  • Segundo, esse valor do padding-top define o tamanho da altura proporcional a largura
  • No exemplo, quando definido padding-top: 30%; quer dizer que a altura vai ter um valor de 30% em relação a largura.

Você só precisa mexer na primeira e segunda Class CSS, no valores width e padding-top.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment