javascript - attribute - Altura igual al ancho dinámico(diseño de fluido CSS)

html tooltip

Question

Esta pregunta ya tiene una respuesta aquí:

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

¿Es posible establecer la misma altura que el ancho (relación 1: 1)?

Ejemplo

+----------+
| body |
| 1:3 |
| |
| +------+ |
| | div | |
| | 1:1 | |
| +------+ |
| |
| |
| |
| |
| |
+----------+

CSS

div {
width: 80%;
height: same-as-width
}

Answer 1

Método extremadamente simple jsfiddle

HTML

<div id="container">
<div id="element">
some text
</div>
</div>

CSS

#container {
width: 50%; /* desired width */
}
#element {
height: 0;
padding-bottom: 100%;
}

Answer 2

¡Hay una manera de usar CSS!

Si establece su ancho según el contenedor principal, puede establecer la altura en 0 y establecer padding-bottom en el porcentaje que se calculará en función del ancho actual:

.some_element {
position: relative;
width: 20%;
height: 0;
padding-bottom: 20%;
}

Esto funciona bien en todos los principales navegadores.

JSFiddle: https://jsfiddle.net/ayb9nzj3/

Answer 3

Ampliando la técnica de relleno superior / inferior, es posible utilizar un pseudo elemento para establecer la altura del elemento. Utilice los márgenes de desbordamiento, flotación y negativos para eliminar el pseudo elemento de la vista y el flujo.

Esto le permite colocar contenido dentro del cuadro sin utilizar un div adicional y / o posicionamiento CSS.

.fixed-ar {
overflow: hidden;
}
.fixed-ar:before {
content: "";
float: left;
margin-left: -10px;
width: 10px;
padding-top: 100%;
}
.fixed-ar-4-3:before {
/* 100 * 3 / 4 = 75 */
padding-top: 75%;
}
.fixed-ar-16-9:before {
/* 100 * 9 / 16 = 56.25 */
padding-top: 56.25%;
}
/* examples */
.fixed-ar {
margin: 1em 0;
max-width: 400px;
color: #999;
background: #EEE url(http://lorempixel.com/640/480/food/5/) center no-repeat;
background-size: contain;
}

<div class="fixed-ar fixed-ar-4-3">4:3 Aspect Ratio</div>
<div class="fixed-ar fixed-ar-16-9">16:9 Aspect Ratio</div>

Answer 4

Es posible sin ningún Javascript :)

Este artículo lo describe perfectamente: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

El HTML:

<div class=''box''>
<div class=''content''>Aspect ratio of 1:1</div>
</div>

El CSS:

.box {
position: relative;
width: 50%; /* desired width */
}
.box:before {
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1*/
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
/* Other ratios - just apply the desired class to the "box" element */
.ratio2_1:before{
padding-top: 50%;
}
.ratio1_2:before{
padding-top: 200%;
}
.ratio4_3:before{
padding-top: 75%;
}
.ratio16_9:before{
padding-top: 56.25%;
}

Answer 5

Realmente esto pertenece como un comentario a la respuesta de Nathan, pero aún no tengo permiso para hacer eso ...
Quería mantener la relación de aspecto, incluso si hay demasiadas cosas para caber en la caja. Su ejemplo expande la altura, cambiando la relación de aspecto. Encontré añadiendo

overflow: hidden;
overflow-x: auto;
overflow-y: auto;

Al elemento ayudado. Ver http://jsfiddle.net/B8FU8/3111/

Answer 6

Usando jQuery puedes lograr esto haciendo

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

Ver ejemplo de trabajo en http://jsfiddle.net/n6DAu/1/

Answer 7

[Actualización: aunque descubrí este truco de forma independiente, desde entonces aprendí que Thierry Koblentz me ganó. Puedes encontrar su artículo de 2009 en A List Apart. Crédito a quien crédito merece.]

Sé que esta es una pregunta antigua, pero encontré un problema similar que resolví solo con CSS. Aquí está mi entrada de blog que discute la solución. Incluido en el post es un ejemplo vivo . El código se vuelve a publicar a continuación.

HTML:

<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>

CSS:

#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}

#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%;
/* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver/* show me! */
}

<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>

Answer 8

ancho: 80vmin; altura: 80vmin;

CSS hace el 80% de la vista más pequeña, altura o ancho

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

Answer 9

Simple y neet: use unidades vw para una altura / anchura receptiva de acuerdo con el ancho de la ventana gráfica.

vw: 1/100 del ancho de la ventana gráfica. ( Fuente MDN )

DEMO

HTML:

<div></div>

CSS para una relación de aspecto 1: 1:

div{
width:80vw;
height:80vw; /* same as width */
}

Tabla para calcular la altura de acuerdo con la relación de aspecto deseada y el ancho del elemento.

 aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625

Esta técnica le permite:

• inserte cualquier contenido dentro del elemento sin usar position:absolute;
• No hay marcado HTML necesario (solo un elemento)
• adapte la relación de aspecto de los elementos de acuerdo con la altura de la ventana gráfica usando unidades vh
• puede hacer un cuadrado sensible u otra relación de aspecto que siempre se adapte a la ventana gráfica de acuerdo con la altura y el ancho de la ventana gráfica (vea esta respuesta: Plaza cuadrada de acuerdo con el ancho y alto de la ventana gráfica o esta demo )

Estas unidades son compatibles con IE9 + ver canIuse para obtener más información