Genişlik/pencerenin genişliği değiştikçe boy değişikliği olan bir kılavuz oluşturmak istiyorum.

Yüksekliği değiştirmek için genişlik değişikliğine göre izin verecek herhangi bir CSS3 kuralları vardırorijinal en boy oranını korurken?

Eğer gerek yok ise hiç değil JavaScript ile bu, sadece ben tercih yapabileceğimi biliyorum.

Sadece bir sarıcı <div> padding-bottom için bir yüzde değeri ile oluşturun.

div {
  width: 100%;
  padding-bottom: 75%;
}

Yükseklik ile <div> bir kabı (4:3 görüntü oranı) genişlik en az u neden olacaktır.

Bu Dolgu için: gerçeğine dayanıyor

Yüzdesi açısından hesaplanırgenişlikoluşturulan çerçevenin taşıyıcı blokunun [...] (kaynak: w3.org, vurgu benim)

Doldurma-alt diğer boy oranları ve 0 genişlik için: değerler

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

Div içerik yerleştirme :

Div boy oranı tutun ve germe var içerik önlemek için konumlandırılmış bir çocuk ekleyin ve sarıcı kenarlarına streç ile gerekir:

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

Here's a demo derinlik demo Bir daha