позволяет сказать, что у вас есть 2 divs div div - контейнер, а внутренний может быть любым элементом, который вам нужен для поддержания его отношения (img или iframe iframe или что-то еще).

html выглядит следующим образом:

<div class='container'>
  <div class='element'>
  </div><!-- end of element -->

позволяет утверждать, что соотношение «элемент»

=> 4 к 1 или 2 к 1 ...

css выглядит так:

.container{
  position: relative;
  height: 0
  padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/

}

.element{
  width : 100%;
  height: 100%;
  position: absolute; 
  top : 0 ;
  bottom : 0 ;
  background : red; /* just for illustration */
}

заполнение, если указано в%, оно рассчитывается на основе ширины не высоты. .. так что в основном вам не важно, какая именно ваша высота будет всегда рассчитываться на основе этого. который будет поддерживать соотношение.