html - style - Altura de respuesta proporcional al ancho

redimensionar imagen css

Question

¿Es posible implementar la siguiente lógica usic HTML y CSS?

width: 100%;
height: 30% of width;

Lo que quiero implementar: si disminuyo el ancho, la altura también disminuirá proporcionalmente.

Answer 1

Relleno %

Esto se puede lograr dando la height:0 del elemento height:0 y padding-bottom:30% .

En todos los navegadores, cuando el relleno se especifica en%, se calcula en relación con el ancho del elemento principal. Esta puede ser una característica muy útil para el diseño responsivo.

Demostración de JSFiddle

En la demostración , el cuadro azul en la parte superior de la página es un solo div . La altura responde, y puede contener una cantidad variable de contenido en línea sin aumentar la altura. Se probó bien en IE7 / 8/9/10, Firefox, Chrome, Safari y Opera.

.content {
    width: 100%;
    height: 0;
    padding-bottom: 30%;
}
...
<div class="content"></div>

Relleno% y posición absoluta

Si hay algún problema con el uso de un elemento de altura 0, la demostración también tiene un cuadro verde que se implementa mediante un elemento de envoltura y una posición absoluta. No estoy seguro si hay alguna ventaja de este enfoque.

.wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 30%;
}
.wrapper .content {
    position: absolute;
    width: 100%;
    height: 100%;
}
...
<div class="wrapper">
    <div class="content"></div>
</div>

Answer 2

Esto ahora es posible en los navegadores modernos con unidades vw y vh :

width: 100vw;
height: 30vw; /* 30% of width */

Soporte del navegador: http://caniuse.com/#feat=viewport-units

¡Sí!

Answer 3

También con JQuery, podrías hacer:

$(window).ready(function () {
    var ratio = 3 / 10, $div = $(''#my_proportional_div'');
    $div.height($div.width() * ratio);
    $(window).bind(''resize'', function() { $div.height($div.width() * ratio); });
});

porque la solución de % de relleno sugerida no funciona con el max/min-width y la max-min height .