uso de CSS (y tal vez JavaScript) para que un elemento sea cuadrada (o mantener una relación de aspecto específica)

Tengo un div que yo quiero tener las siguientes características:uso de CSS (y tal vez JavaScript) para que un elemento sea cuadrada (o mantener una relación de aspecto específica)

Ancho = 50% de su matriz elemento
Altura igual a lo que sea necesario para mantener una determinada relación de aspecto.

Necesito usar porcentajes porque el objeto cambiará de tamaño de izquierda a derecha cuando se cambia el tamaño del navegador. Quiero que el objeto se redimensione de arriba hacia abajo para garantizar que el objeto mantenga la misma relación de aspecto.

No creo que haya ninguna forma de usar CSS puro para hacer esto, pero ¿alguien sabe de alguna manera? Alternativamente, ¿hay una forma fácil de JavaScript para hacer esto? (JQuery está bien.)

Fuente

2010-01-14 David Pfeffer

Posible duplicado: http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div –

me di cuenta de cómo hacer esto sin js, aunque es necesario utilizar una imagen transparente.

establecer una estructura de HTML como:

<div class="rect_container"><img class="rect_image" src="rect_image.png"/> 
<div class="rect">Your favorite content here</div> 
</div>

Utilice un png transparente AxB para rect_image donde AxB es la relación de aspecto.

Mientras tanto estableció una hoja de estilos como:

.rect_container {width: 50%; position: relative;} 
.rect_image {width: 100%; display: block;} 
.rect {width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;}

Lo importante aquí es tomar ventaja del hecho de que las imágenes mantienen su relación de aspecto cuando se redimensionan en una dirección. Mientras tanto, necesitamos un div utilizable, por lo que hacemos que la imagen se muestre como un bloque, lo envolvemos en un div y ponemos un div completamente posicionado dentro de ese. Destilé este código de algo más complicado que en realidad probé. Funciona de maravilla.

Fuente

2010-04-22 05:34:32 Joe

Me salvó el día, como un encanto. – skrat

Bonito genio. Me encanta cuando JS no es necesario. – Jesse

Aquí tienes: Detecting a browser resize using JQuery.

Fuente

2010-01-14 17:26:27

jQuery suena bastante fácil. Ajuste el ancho de 50% en el CSS, y luego el siguiente:

function onResize() { 
    var el = $('#element'); 
    el.height(el.width()); 
} 
$(window).resize(onResize); 
$(document).ready(onResize);

Fuente

2010-01-14 17:27:16 Matchu

Aún esperando una respuesta CSS ingeniosa y pura pero de lo contrario, marcaré esto como aceptado. –

Creo que para imágenes puedes hacer altura: automático, pero solo para imágenes. – Matchu

Bummer. Necesito hacer esto para un div que contiene un elemento flash. –

Aquí hay una versión CSS puro sin etiqueta img:

<div class="apple_container"><div class="apple_icon"></div></div>

SCSS (incluya brújula para hacer que el fondo de tamaño):

.apple_container { 
    width: 50%; 
} 
.apple_icon { 
    padding-bottom: 100%; 
    background-image: url(/images/apple.png); 
    background-repeat: no-repeat; 
    @include background-size(contain); 
    background-position: center center; 
}

CSS generado a partir de lo anterior:

.apple_container { 
    width: 50%; 
} 
.apple_icon { 
    padding-bottom: 100%; 
    background-image: url(/images/apple.png); 
    background-repeat: no-repeat; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
    background-position: center center; 
}

Resultados en un elemento cuadrado con una imagen de fondo centrada y ajustada. Esto es bueno para los elementos de respuesta que desea cambiar el tamaño dependiendo del dispositivo del usuario.

Fuente

2012-09-13 14:28:45 stef

uso de CSS (y tal vez JavaScript) para que un elemento sea cuadrada (o mantener una relación de aspecto específica)

Respuesta

Cuestiones relacionadas