¿Puedo escalar la altura de un div proporcionalmente a su ancho usando CSS?

81

¿Puedo configurar cualquier variable en CSS como si quisiera que la altura de mi div sea siempre la mitad del ancho que mi div escala con el ancho del tamaño de la pantalla para div está en porcentaje?

<div class="ss"></div>

CSS:

.ss {
    width:30%;
    height: half of the width;
}

Este 30% de ancho se escala con la resolución de pantalla.

html css hombre araña
fuente
3
Consulte CSS: ¿una forma de mantener la relación de aspecto al cambiar el tamaño de un DIV?
thgaskell
4
posible duplicado de CSS: ¿una forma de mantener la relación de aspecto al cambiar el tamaño de un DIV?
Qtax

Respuestas:

124

Puede hacerlo con la ayuda de relleno en un elemento principal, porque el relleno relativo (incluso en altura) se basa en el ancho del elemento principal.

CSS:

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

Esto se basa en este artículo: Escalado proporcional de cuadros receptivos usando solo CSS

Stefan H Singer
fuente
1
Este CSS tiene todo tipo de cosas raras aquí y allá. Sin embargo, funciona.
Ghasan
1
¡El enlace del artículo se ha ido!
Sanxofon
¡Debo negarme a usar esa pieza misteriosa de lo que sea!
Jacek Dziurdzikowski
Se agradecería mucho la explicación. Esto es realmente mágico.
Palec
La posición relativa hace que .imageContainer sea el origen de coordenadas para img posicionada absolutamente dentro. Float parece irrelevante, tiene sentido solo en el contexto en el que quiero poner varios de dichos .imageContainer uno al lado del otro para formar mosaicos.
Palec
15

Otra excelente manera de lograr esto es usar una imagen transparente con una relación de aspecto establecida. Luego, establezca el ancho de la imagen al 100% y la altura a automático. Desafortunadamente, eso reducirá el contenido original del contenedor. Por lo tanto, debe envolver el contenido original en otro div y colocarlo absolutamente en la parte superior del div principal.

<div class="parent">
   <img class="aspect-ratio" src="images/aspect-ratio.png" />
   <div class="content">Content</div>
</div>

CSS

.parent {
  position: relative;
}
.aspect-ratio {
  width: 100%;
  height: auto;
}
.content {
  position: absolute;
  width: 100%;
  top: 0; left: 0;
}
jdavis
fuente
1
Esto sólo funcionó para mí también por el establecimiento height: 100%;de .content. Gracias por el consejo. Me gusta más este método que el relleno.
natec
La pregunta es "usar CSS", mejor evitar agregar nuevos elementos a HTML
Diego Betto
9

Puede usar View Width para el "ancho" y nuevamente la mitad del View Width para la "altura". De esta manera, se le garantiza la proporción correcta independientemente del tamaño de la ventana gráfica.

<div class="ss"></div>

.ss
{
    width: 30vw;
    height: 15vw;
}

Violín

GDavoli
fuente
6

Si desea un tamaño vertical proporcional a un ancho establecido en píxeles en un div adjunto, creo que necesita un elemento adicional, así:

#html

<div class="ptest">
    <div class="ptest-wrap">
        <div class="ptest-inner">
            Put content here
        </div>
    </div>
</div>

#css
.ptest {
  width: 200px;
  position: relative;
}

.ptest-wrap {
    padding-top: 60%;
}
.ptest-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #333;
}

Aquí está la solución de 2 div que no funciona. Tenga en cuenta que el 60% de relleno vertical es proporcional al ancho de la ventana, no al div.ptestancho:

http://jsfiddle.net/d85FM/

Aquí está el ejemplo con el código anterior, que funciona:

http://jsfiddle.net/mmq29/

zlovelady
fuente
3

Esta respuesta es muy similar a otras, excepto que prefiero no usar tantos nombres de clase. Pero eso es solo una preferencia personal. Se podría argumentar que el uso de nombres de clase en cada div es más transparente, ya que declara de antemano el propósito de los divs anidados.

<div id="MyDiv" class="proportional">
  <div>
    <div>
      <p>Content</p>
    </div>
  </div>
</div>

Aquí está el CSS genérico:

.proportional { position:relative; }
.proportional > div > div { position:absolute; top:0px; bottom:0px; left:0px; right:0px; }

Luego, apunte al primer div interno para establecer el ancho y la altura (padding-top): 

#MyDiv > div { width:200px; padding-top:50%; }
Lee Gunn
fuente
3

Para cualquiera que busque una solución escalable: escribí una pequeña utilidad de ayuda en SASS para generar rectángulos proporcionales sensibles para diferentes puntos de interrupción. Eche un vistazo a las proporciones de SASS

¡Espero que ayude a alguien!

BrunoFenzl
fuente
3

Puede utilizar el ancho de la vista para establecer la altura. 100 vw es el 100% del ancho. height: 60vw;haría la altura el 60% del ancho.

Joe Giusti
fuente
Puede escribir una respuesta completa para dar los mejores comentarios.
Amirhossein
2

Una forma útil cuando se trabaja con imágenes, pero se puede utilizar como solución alternativa de lo contrario:

<html>
<head>
</head>
<style>
    #someContainer {
        width:50%;
        position: relative;
    }
    #par {
        width: 100%;
        background-color:red;
    }
    #image {
        width: 100%;
        visibility: hidden;
    }
    #myContent {
        position:absolute;
    }
</style>
<div id="someContainer">
    <div id="par">
        <div id="myContent">
            <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>    
        </div>
        <img src="yourImage" id="image"/>
    </div>
</div>
</html>

Para usar, reemplace yourImage con la URL de su imagen. Utiliza una imagen con la relación ancho / alto que desee.

div id = "myContent" está aquí como ejemplo de solución temporal donde myContent se superpondrá a la imagen.

Esto funciona así: El div padre adoptará la altura de la imagen, la altura de la imagen adoptará el ancho del padre. Sin embargo, la imagen está oculta.

Skulio
fuente
1

Puede asignar tanto el ancho como el alto del elemento usando vwo vh. Por ejemplo:

#anyElement {
    width: 20vh;
    height: 20vh;
}

Esto establecería tanto el ancho como el alto en un 20% de la altura actual del navegador, conservando la relación de aspecto. Sin embargo, esto solo funciona si desea escalar proporcionalmente a las dimensiones de la ventana gráfica.

d13
fuente