16:9 manzara, bir video gibi yaklaşık sabit En Boy oranı olan bir araya getirmek için bir site var.

O merkezli ve genişletmek için kullanılabilir genişliği ve yüksekliği doldurmak için kullanılabilir, ama hiçbir zaman büyük iki tarafında büyümek istiyorum.

Örneğin:

1. Uzun boylu ve ince bir sayfa içeriği ile doğru orantılı bir yükseklik korurken tam genişlik germe olurdu.
2. Kısa geniş bir Sayfa İçeriğinin tam boy germe, orantılı genişlikte olurdu.

Bakıyorum iki yöntem vardır:

1. Doğru boy oranı ile bir resim div ama büyük tarayıcılarda aynı şekilde davranır ulaşamadım kabı genişletmek için kullanın.
2. Orantılı bir alt doldurma ayarı, ama bu sadece nispeten genişliği için çalışır ve yükseklik yok sayıyor. Sadece genişlik ve görüntüler dikey kaydırma çubukları ile büyüyor.

JS ile bunu kolayca yapabilirsin biliyorum, ama saf CSS bir çözüm istiyorum.

Herhangi bir fikir?

Yeni CSS viewport units vw ve vh (görünüm penceresi genişliği / görüntü kutusu yükseklik) kullanın

FIDDLE

Dikey ve yatay olarak yeniden boyutlandırmak ve eleman hep oranını kırma ve kaydırma çubukları olmadan en fazla görünüm alanı boyutunu dolduracak göreceksiniz!

(SAF) CSS

div
{
    width: 100vw; 
    height: 56.25vw; /* height:width ratio = 9/16 = .5625  */
    background: pink;
    max-height: 100vh;
    max-width: 177.78vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

* {
  margin: 0;
  padding: 0;
}
div {
  width: 100vw;
  height: 56.25vw;
  /* 100/56.25 = 1.778 */
  background: pink;
  max-height: 100vh;
  max-width: 177.78vh;
  /* 16/9 = 1.778 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  /* vertical center */
  left: 0;
  right: 0;
  /* horizontal center */
}

<div></div>

Eğer 90% genişliği ve yüksekliği görüş diyelim, en fazla kullanmak isterseniz:FIDDLE

* {
  margin: 0;
  padding: 0;
}
div {
  width: 90vw;
  /* 90% of viewport vidth */
  height: 50.625vw;
  /* ratio = 9/16 * 90 = 50.625 */
  background: pink;
  max-height: 90vh;
  max-width: 160vh;
  /* 16/9 * 90 = 160 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div></div>

Ayrıca, tarayıcı desteği çok iyidir: 9 , FF, Chrome, Safari- caniuse