Ajuste de Anchura del elemento base en la altura a través de CSS

Question

que tienen un conjunto de elementos y requieren que su ancho mínimo sea igual a su altura, pero la altura no se establece explícitamente. Actualmente soy capaz de lograr esto estableciendo la propiedad css min-width a través de jQuery:

$(document).ready 
(
    function() 
    { 
     $('.myClass').each 
     (
      function() {$(this).css('min-width', $(this).css('height'));} 
     ); 
    } 
); 

¿Es posible especificar este comportamiento directamente en el css?

que aquí hay una jsFiddle demostrando lo que estoy tratando de lograr: http://jsfiddle.net/p8PeW/

Answer 1

No creo que esto es posible sin JS, pero tal vez alguien me puede demostrar que estoy equivocado?

CSS no permite utilizar variables dinámicas, por lo que si la altura no se establece hasta que se carga la página, no estoy seguro de cómo esto podría hacerse.

Answer 2

Si usted está tratando de hacer cuadrados, tendrá que dar cuenta de ambos casos (W > H y W < H):

$('label').each(function() { 
    if ($(this).height() > $(this).width()) { 
     $(this).css('min-width', $(this).height()); 
    } else { 
     $(this).css('min-height', $(this).width()); 
    } 
}); 

Answer 3

Esto es realmente posible sin JS!

La clave es hacer uso de un <img>, que es un replaced element, y por lo tanto, si solo configura la altura, su ancho se establecerá automáticamente para preservar la relación de aspecto intrínseca de la imagen.

Por lo tanto puede hacer lo siguiente:

<style> 
    .container { 
    position: relative; 
    display: inline-block; /* shrink wrap */ 
    height: 50%; /* arbitrary input height; adjust this */ 
    } 
    .container > img { 
    height: 100%; /* make the img's width 100% of the height of .container */ 
    } 
    .contents { 
    /* match size of .container, without influencing it */ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    } 
</style> 

<div class="container"> 
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> 
    <div class="contents"> 
    Put contents here. 
    </div> 
</div> 

Si quería .contents tener una proporción de 4: 3, entonces sería en lugar ajustar la altura de la img a 133%, por lo que la anchura de la img y por lo tanto de .contents sería 133% de la altura de .container.

en vivo de demostración de 1: 4 Formato: http://jsbin.com/afecej/1/edit (con comentarios adicionales de código)

En caso de que se esté preguntando, los datos img URI es un 1x1 px transparent gif). Si la imagen no tiene una relación de aspecto 1: 1, deberá ajustar los valores de altura que configure de forma correspondiente.

Answer 4

De W3C Box Model en padding:

<percentage> The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

para que pueda tener que utilizando sólo CSS. Ver this example desde this blog post en otro tema igualmente interesante.

Answer 5

Hay otra solución css muy simple, pero sólo para el caso exacto de la OP presenta en su jsFiddle:

label { 
 
    background-color: Black; 
 
    color: White; 
 
    padding: 1px; 
 
    font-family: sans-serif; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    min-width: 1em; /* set width to the glyphs height */ 
 
}

<label>A</label><br/> 
 
<label>B</label><br/> 
 
<label>C</label><br/> 
 
<label>D</label><br/> 
 
<label>E</label><br/> 
 
<label>F</label><br/> 
 
<label>R6a</label>