Escale un div para que quepa en la ventana pero preserve la relación de aspecto

Question

¿Cómo puedo escalar un div para que quepa dentro del puerto de vista del navegador pero conserva la relación de aspecto del div? ¿Cómo puedo hacer esto usando CSS y/o JQuery?

Gracias!

Answer 1

Esto es posible con JQuery y un poco de matemática.

Utilice JQuery para obtener la anchura y la altura de los puertos de visualización, así como las dimensiones actuales de los divs.

$(document).width(); 

calcular el divs relación de aspecto actual. por ejemplo, anchura/altura

Se necesita un poco de lógica para determinar si se ajusta la anchura o altura primero, a continuación, utilizar la relación inicial para calcular el otro lado.

Answer 2

jQuery tiene un complemento que hace crecer un objeto hasta que uno de sus lados alcanza un cierto valor de px. Acoplando esto será la altura de la ventana gráfica, puede expandir cualquier elemento a ese tamaño: jQuery MaxSide.

Answer 3

Gracias a Geoff por la información sobre cómo estructurar las matemáticas y la lógica. Aquí está mi aplicación de jQuery, que estoy usando el tamaño de una caja de luz de modo que llene la ventana:

var height = originalHeight; 
var width = originalWidth; 
aspect = width/height; 

if($(window).height() < $(window).width()) { 
    var resizedHeight = $(window).height(); 
    var resizedWidth = resizedHeight * aspect; 
} 

else { // screen width is smaller than height (mobile, etc) 
    var resizedWidth = $(window).width(); 
    var resizedHeight = resizedWidth/aspect;  
} 

Esto está funcionando bien para mí en este momento a través de la computadora portátil y pantalla del móvil tamaños.

Answer 4

No necesita javascript para esto. Puedes usar CSS puro.

Un porcentaje de relleno se interpreta en relación con el bloque contenedor ancho. Combínelo con la posición: absoluta en un elemento secundario, y puede colocar casi cualquier cosa en una caja que conserve su relación de aspecto.

HTML:

<div class="aspectwrapper"> 
    <div class="content"> 
    </div> 
</div> 

CSS:

.aspectwrapper { 
    display: inline-block; /* shrink to fit */ 
    width: 100%;   /* whatever width you like */ 
    position: relative; /* so .content can use position: absolute */ 
} 
.aspectwrapper::after { 
    padding-top: 56.25%; /* percentage of containing block _width_ */ 
    display: block; 
    content: ''; 
} 
.content { 
    position: absolute; 
    top: 0; bottom: 0; right: 0; left: 0; /* follow the parent's edges */ 
    outline: thin dashed green;   /* just so you can see the box */ 
} 

El display: inline-block deja un poco de espacio extra debajo del borde inferior de la caja .aspectwrapper, por lo que otro elemento a continuación no se ejecutará al ras contra ella . El uso de display: block lo eliminará.

Gracias a this post por la punta!

---

Otro enfoque se basa en el hecho de que los navegadores respetan la relación de aspecto de una imagen al cambiar el tamaño sólo su anchura o altura. (Voy a dejar que Google generar una imagen transparente de 16x9 con fines de demostración, pero en la práctica se iba a usar su propia imagen estática.)

HTML:

<div class="aspectwrapper"> 
    <img class="aspectspacer" src="http://chart.googleapis.com/chart?cht=p3&chs=160x90" /> 
    <div class="content"> 
    </div> 
</div> 

CSS:

.aspectwrapper { 
    width: 100%; 
    position: relative; 
} 
.aspectspacer { 
    width: 100%; /* let the enlarged image height push .aspectwrapper's bottom edge */ 
} 
.content { 
    position: absolute; 
    top: 0; bottom: 0; right: 0; left: 0; 
    outline: thin dashed green; 
}