Para mantener la relación de aspecto de un div con CSS, cree elementos flexibles que mantengan su relación de aspecto (4:3, 16:9, etc.) al cambiar el tamaño de la ventana del navegador.
¿Qué es la relación de aspecto?
La relación de aspecto de un elemento describe la relación proporcional entre su ancho y alto. Dos relaciones de aspecto de video comunes son 4:3 y 16:9.
Para mantener la relación de aspecto del div, agregue un valor porcentual para padding-top. Las diferentes relaciones de aspecto tienen diferentes valores porcentuales. Algunos de ellos se muestran a continuación:
aspect ratio | padding-top value
--------------|----------------------
1:1 | 100%
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
Sintaxis:
element {
padding-top: %value;
}
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
.container {
background-color: green;
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
font-size: 25px;
color: white;
}
.example {
background: white;
color: green;
font-weight:bold;
font-size: 40px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="text">
<div class = "example">GeeksforGeeks</div>
<p>A Computer Science portal for geeks. It
contains well written, well thought and well
explained computer science and programming
articles, quizzes etc. Also it contains several
coding questions to practice and develop your
skills in programming.</p>
</div>
</div>
</body>
</html>
Producción:
La salida del ejemplo anterior se establece en una relación de aspecto de 16:9. Cambia el tamaño de la ventana para ver el efecto. También cambie los valores correspondientes de la relación de aspecto para ver los cambios deseados en la ventana del navegador.
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA