Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS: Intrinsic Ratio

CSS: Intrinsic Ratio

Make the container of an image keep the size and aspect ratio of the image.

.intrinsic-ratio-container {
  position: relative;
  padding-bottom: 56.285714%; /* This defines the aspect ratio. */
  height: 0;
  color: #ddd; /* Same color as background-color to hide the image description text. */
  background-color: #ddd;
  overflow: hidden;
}

.intrinsic-ratio-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: transparent !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.