×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
1
Language: CSS
Posted by: Philip Rehberger
Added: Sep 14, 2016 1:54 AM
Views: 7
Using 20% for padding makes the height of the box equal to 20% of its width. No matter the width of the viewport, the child div will keep its aspect ratio (100% / 20% = 5:1).
  1. .container {
  2.     height: 0;
  3.     padding-bottom: 20%;
  4.     position: relative;
  5. }
  6. .container div {
  7.     border: 2px dashed #dddddd;  
  8.     height: 100%;
  9.     left: 0;
  10.     position: absolute;
  11.     top: 0;
  12.     width: 100%;
  13. }