Блок с пропорциями 16/9 на CSS

#html #css #вёрстка

Есть какой-то блок. Как задать ему ширину и высоту чтоб при изменении размеров окна
блок всегда сохранял пропорции 16/9? 



* {
  margin: 0;
  padding: 0;
}

section {
  height: 100%;
  width: 100%;
}

div {
  padding-bottom: 56.25%;
  position: relative;
}

div article {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: green;
}

  

    

  





В таком варианте если высота блока слишком мала, то появляется скроллинг, а как можно
сделать так, чтобы блок при этом был на 100% по высоте, но ширина сохранила пропорцию?
    

Ответы

Ответ 1

Просто добавьте для section max-width выраженный в vh.



* {
  margin: 0;
  padding: 0;
}

section {
  height: 100%;
  width: 100%;
  max-width: calc(16 / 9 * 100vh);
}

div {
  padding-bottom: 56.25%;
  position: relative;
}

div article {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: green;
}

  

    

  



Ответ 2

Если речь идёт о заполнении всего экрана по высоте, то могу предложить такое:



body {
  margin: 0;
}

article {
  background-color: green;
  height: 100vh;
  width: 177.7777777777777778vh;
}

@media all and (max-width: 177.7777777777777778vh) {
  article {
    height: calc(100vh - 17px);
    width: calc(177.7777777777777778vh - 30.22222222222222px);
  }
}

/* Soft transition for scrollbar placement */
/* Does NOT work in Chrome 71, works in FF 64 */
@media all and (min-width: calc(177.7777777777777778vh - 30.22222222222222px)) and
(max-width: 177.7777777777777778vh) {
  article {
    height: 56.25vw;
    width: 100vw;
  }
}