Skip to content

Instantly share code, notes, and snippets.

@vmdao
Last active July 9, 2018 03:48
Show Gist options
  • Save vmdao/74737670e41e0b58733ce50e8b87c2c5 to your computer and use it in GitHub Desktop.
Save vmdao/74737670e41e0b58733ce50e8b87c2c5 to your computer and use it in GitHub Desktop.
[CSS] The heigh automatically changes by the width

Create box width and Height ratio Thank Nghiep, go to link

<!--- code HTML -->
<div class="constant-width-to-height-ratio"></div>
# Code CSS
.constant-width-to-height-ratio {
  background: #333;
  width: 150px;
}
.constant-width-to-height-ratio::before {
  content: '';
  padding-top: 60%; // ratio 
  float: left;
}
.constant-width-to-height-ratio::after {
  content: '';
  display: block;
  clear: both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment