lujanfernaud/css_intrinsic_ratio.md

## css_intrinsic_ratio.md

      
    Raw
  

              css_intrinsic_ratio.md
            
          
    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;
}