search

dwarvesf / til

Today I Learned. Our knowledge hub. List out what we've learned everyday, organized.
29 stars 1 forks source link

Maintain DIV aspect ratio in CSS #18

Open huygn opened 7 years ago

huygn commented 7 years ago

https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css

div {
  width: 100%;
  padding-bottom: 75%; /* 4:3 ratio */
  background: gold;
}

padding-bottom values for other aspect ratios and 100% width:

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%