[Update: chociaż odkryłem tę sztuczkę niezależnie, od tego czasu nauczyłem się, że Thierry Koblentz wyprzedził mnie. Możesz znaleźć jego 2009 Artykuł na liście Apart. Kredyt tam, gdzie kredyt jest należny.]

Wiem, że to stare pytanie, ale napotkałem podobny problem, który rozwiązałem tylko za pomocą CSS. Oto mój blog post , który omawia rozwiązanie. W poście jest live example . Kod jest reposted poniżej.

HTML:

<div id="container">
    <div id="dummy"></div>
    <div id="element">
        some text
    </div>
</div>

CSS:

#container {
    display: inline-block;
    position: relative;
    width: 50%;
}
#dummy {
    margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver /* show me! */
}

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

Jest sposób na użycie CSS!

Jeśli ustawisz szerokość w zależności od kontenera nadrzędnego, możesz ustawić wysokość na 0 i ustawić wartość procentową padding-bottom, która będzie obliczana w zależności od bieżącej szerokości:

.some_element {
    position: relative;
    width: 20%;
    height: 0;
    padding-bottom: 20%;
}

To działa dobrze we wszystkich głównych przeglądarkach.

JSFiddle: https://jsfiddle.net/ayb9nzj3 /

Jest to możliwe bez żadnego Javascript:)

Ten artykuł opisuje to doskonale - http://www.mademyday.de/css-height-equals-width-with-pure-css.html

HTML:

<div class='box'>
    <div class='content'>Aspect ratio of 1:1</div>
</div> 

CSS:

.box {
    position: relative;
    width:    50%; /* desired width */
}

.box:before {
    content:     "";
    display:     block;
    padding-top: 100%; /* initial ratio of 1:1*/
}

.content {
    position: absolute;
    top:      0;
    left:     0;
    bottom:   0;
    right:    0;
}

/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}

Simple i neet : użyj jednostek vw dla responsywnej wysokości / szerokości zgodnie z szerokością viewportu.

Vw: 1 / 100. szerokość punktu widzenia. (Source MDN)

DEMO

HTML:

<div></div>

CSS dla proporcji 1: 1:

div{
    width:80vw;
    height:80vw; /* same as width */
}

Tabela do obliczania wysokości według pożądanego współczynnika kształtu i szerokości elementu.

   aspect ratio  |  multiply width by
    -----------------------------------
         1:1      |         1
         1:3      |         3
         4:3      |        0.75
        16:9      |       0.5625

Ta technika pozwala ty do:

• Wstaw dowolną zawartość wewnątrz elementu bez użycia position:absolute;
• brak niepotrzebnych znaczników HTML (tylko jeden element)
• dostosuj proporcje elementów zgodnie z wysokością viewportu za pomocą jednostek vh
• możesz utworzyć kwadrat responsywny lub inny współczynnik proporcji, który zawsze pasuje do viewportu zgodnie z wysokością i szerokością viewportu (zobacz tę odpowiedź : kwadrat responsywny zgodnie z szerokością i wysokością viewportu lub to demo )

Jednostki te są obsługiwane przez IE9 + zobacz canIuse aby uzyskać więcej informacji

Niezwykle prosta metoda jsfiddle

HTML

<div id="container">
    <div id="element">
        some text
    </div>
</div>

CSS

#container {
    width: 50%; /* desired width */
}

#element {
    height: 0;
    padding-bottom: 100%;
}

Rozszerzając technikę padding top/bottom, można użyć pseudo elementu do ustawienia wysokości elementu. Użyj overflow, float i ujemnych marginesów, aby usunąć pseudo element z widoku i przepływu.

Pozwala to umieścić zawartość wewnątrz pudełka bez użycia dodatkowego pozycjonowania div I / lub CSS.

.fixed-ar {
  overflow: hidden;
}
.fixed-ar:before {
  content: "";
  float: left;
  margin-left: -10px;
  width: 10px;
  padding-top: 100%;
}
.fixed-ar-4-3:before {
  /* 100 * 3 / 4 = 75 */
  padding-top: 75%;
}
.fixed-ar-16-9:before {
  /* 100 * 9 / 16 = 56.25 */
  padding-top: 56.25%;
}
/* examples */
.fixed-ar {
  margin: 1em 0;
  max-width: 400px;
  color: #999;
  background: #EEE url(http://lorempixel.com/640/480/food/5/) center no-repeat;
  background-size: contain;
}

<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>

Naprawdę należy to jako komentarz do odpowiedzi Nathana, ale nie mogę tego jeszcze zrobić...
Chciałem zachować proporcje, nawet jeśli jest zbyt dużo rzeczy, aby zmieścić się w pudełku. Jego przykład rozszerza wysokość, zmieniając proporcje. Znalazłem dodanie

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

Do .element pomógł. Zobacz http://jsfiddle.net/B8FU8/3111/

Width: 80vmin; wysokość: 80vmin;

CSS wykonuje 80% najmniejszego widoku, wysokości lub szerokości

Http://caniuse.com/#feat=viewport-units