¿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.
Respuestas:
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
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;
}
height: 100%;de .content. Gracias por el consejo. Me gusta más este método que el relleno.
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:
Aquí está el ejemplo con el código anterior, que funciona:
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%; }
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!
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.
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.
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.