Как адаптировать блоки?

267

26 ноября 2016, 19:41

Как можно адаптировать два блока или выразить пиксели в процентах?

Ширина контейнера - 1366px. В него входят два блока : первый - 908px, второй - 458px.

Вот примерный код для понятности :

.container { 
  width: 100%; 
  max-width: 1366px; 
  margin: 0 auto; 
} 
.header-block { 
  height: 715px; 
} 
.header-block-left { 
  width: 908px; 
  height: 715px; 
  float: left; 
} 
.header-block-left img { 
  width: 100%; 
  height: auto; 
} 
.header-block-right { 
  width: 458px; 
  height: 715px; 
  float: left; 
  background: #fff; 
}

<div class="header-block container"> 
  <div class="header-block-left"> 
    <img src="img/block-1.png"> 
  </div> 
 
  <div class="header-block-right"></div>

Получается неравномерная высота и при уменьшении/увеличении разрешения, блоки едут.

Answer 1

Разделите 908 на 1366 и передвиньте вправо запятую на две цифры 908:1366=0,6647..= 66,5% и так далее.