css - tag - javascript title

¿Solución CSS pura? ¿Elementos cuadrados?

Question

Esta pregunta ya tiene una respuesta aquí:

• Mantener la relación de aspecto de un div con CSS 21 respuestas

Si tengo un <div> con un ancho relativo (como el ancho: 50% ), ¿hay una forma sencilla de hacer que tenga el mismo ancho que la altura sin tener que recurrir a JavaScript?

Answer 1

No, y sí (Kinda)

Bien, entonces la respuesta corta es "no", no es posible. La respuesta larga es "sí", dadas ciertas restricciones y concesiones (es decir, marcado HTML adicional y limitaciones sobre lo que se puede hacer).

Dado este CSS:

.square {
    position: relative;
    margin: 20px;
    display: inline-block; /* could be float */
    overflow: auto; /* UPDATE: if content may overflow square */
}
.sq-setter-w {
    width: 100%;
    height: auto;
    visibility: hidden;
}
.sq-setter-h {
    width: auto;
    height: 100%;
    visibility: hidden;
}
.sq-content {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

Con este HTML:

<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
<div class="extrawrapper">
<div class="square" style="width: 200px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>
</div>
<div class="extrawrapper">
<div class="square" style="height: 100px">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-h"/>
    <div class="sq-content">Here is content</div>
</div>
</div>

Puedes conseguir que haga lo que muestra este violín .

Las claves son:

1. La imagen utilizada debe ser una imagen cuadrada, ya que está impulsando el tamaño proporcional (el elemento img es el único elemento que puede hacer ese trabajo proporcional, ya que puede basar su tamaño en la proporción de la imagen en sí).
2. Debe saber si va a configurar el width o el height para que pueda configurar la clase de imagen correctamente para su tamaño. Opcionalmente , establezca el width o el height en el img , entonces no necesita preocuparse por establecer una clase en el valor del 100% . Mi demo asumía que establecía el tamaño en el div contenedor (mi clase .square ).
3. Para hacer que el div contraiga alrededor del img que está impulsando el tamaño proporcional que necesita para configurar la display: inline-block o un float en el div (como se indica en el css anterior).
4. Debido al # 3, si quieres que ese div actúe más "como un bloque", necesitas darles un div envoltorio adicional como muestran el tercero y el cuarto.

Obviamente, hay una gran cantidad de margen adicional involucrado en esta solución. Así que, en muchos sentidos, es mejor decir "solo use javascript", pero quería probar que se podía hacer (al menos en algunos casos) únicamente con HTML y CSS.

Actualización: para mostrar la posibilidad de tamaño flexible

Vea este violín para conocer los porcentajes que determinan el tamaño , con este ejemplo html ( width establecido en 30% ):

<div class="square" style="width: 30%">
    <img src="http://dummyimage.com/50x50/000/fff.gif&text=50x50" class="sq-setter-w"/>
    <div class="sq-content">Here is content</div>
</div>

Answer 2

De hecho, es posible lograrlo con este sencillo truco que encontré en este blog.

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

Espero que ayude

Answer 3

Esto no se puede hacer con CSS solo. Usando jQuery puedes lograr esto haciendo

var chld = $(''.child'').width();
$(''.child'').css({''height'':chld+''px''});

Ver ejemplo de trabajo en http://jsfiddle.net/4Jnfq/

Puede encontrar una solución solo para CSS here en la última actualización "Cambiar tamaño con contenido".
Aunque se aplica a los círculos, puede eliminar el border-radius: 50% del border-radius: 50% para que funcione con los cuadrados.

Answer 4

Necesitaba lograr algo similar hoy y tuve la misma idea con la imagen. Quería ver otras posibilidades y google me guió aquí.

... realmente no necesitas una imagen src . simplemente puedes usar un hash si quieres un cuadrado. Guarda una solicitud http.

Sin embargo, si quieres obtener una relación de aspecto diferente, debes usar un src . Si desea tener una relación de 16: 9, la imagen debe ser de 16px ancho y 9px alto (ir lo más pequeña posible)

Comparando ambas técnicas (ver otras respuestas en este hilo)

img vs. padding-bottom

Aquí hay un violín para mostrar cuánto más compatible es la versión img (también puede manejar fácilmente el valor de px (un intervalo cambiará el tamaño del "cuadrado" cada segundo)

Si usa valores de porcentaje, ambas técnicas pueden lograr el mismo resultado pero la versión de relleno no necesita el margen de beneficio adicional ( <img src="#"/> )

Conclusión:

Dependiendo de la implementación, cada técnica tiene sus pros y sus contras.

HTML

<div class="floater">
    <div class="square square_noImg">
        <div class="inner">Hey blue you look totally squared</div>
    </div>
    <div class="square square_img">
        <img src="#"/>
        <div class="inner">Hey red you seem off</div>
    </div>
</div>

CSS

.floater {
    font-size: 0;
}
.square {
    position: relative;
    display: inline-block;
    width: 100px;
    margin: 0 5px; 
}
.square_noImg {
    padding-bottom: 100px;
    background: red;
}
.square_img {    
    background: blue;
}
img{
    width: 100%;
    height: auto;
    border: 0;
    visibility: hidden;
}
.inner {
    position: absolute;
    top: 10%;
    right: 10%;
    bottom: 10%;
    left: 10%;
    background: white;
    font-size: 14px;
    text-align: center;
    overflow: hidden;
    padding: 10px 5px;
}

Answer 5

No con unidades relativas como % , porque se calcularían en relación con un elemento contenedor. Pero es posible hacer un elemento cuadrado si usas unidades como px o em para establecer ambas dimensiones.

Answer 6

Un enfoque nativo de JS en respuesta al comentario de @Dave en @ praveen-kumar:

var squareElement = function(el) {
    el.style.height = el.offsetWidth + ''px'';
}

y usarlo en cualquier lugar

squareElement(document.querySelector(''your-selector''));