Breaking

Post Top Ad

Your Ad Spot

sábado, 12 de octubre de 2019

Relación de aspecto mínima en CSS

El padding-bottomtruco de la relación de aspecto ha existido por un tiempo, y hasta que obtengamos la unidad oficial , es todo lo que tenemos para crear elementos de tamaño fluido. En Daisie , recuerdo haber necesitado una 'relación de aspecto mínima' pero nunca la implementé correctamente. Hoy, cuando trabajaba en algunas tarjetas, ese requisito surgió nuevamente.
El objetivo es tener un contenedor con una relación de aspecto mínima, pero si el contenido dentro lo excede, permitimos que crezca.

El resultado

Artículo con una relación de aspecto del 50%
Artículo con montones y montones de contenido muy alto y bastante sorprendente que abarca tantas líneas que se vuelve más alto que la relación de aspecto mínima.

El código

El CSS es agradable y conciso, y salió de 2012. Clearfixes n 'all. El :beforepseudo elemento usa el padding-bottomtruco para darle al contenedor algo de altura, pero flota fuera del camino y luego se :afterdespeja. Si el contenido es mayor que el cuadro, el elemento se define por esa altura.
.min-aspect:before {
  padding-bottom: 50%; /* Minimum aspect ratio */
  content: '';
  float: left;
}

.min-aspect:after {
  display: table;
  content: '';
  clear: both;
}
Ejemplo de codepen

La adicion

¡Esto también se puede reforzar con min-heightel padre, dándole tres ejes de control!

La advertencia: dado lo clásico que es este código, esto probablemente se haya implementado muchas veces antes, pero mis habilidades para buscar en Google no fueron lo suficientemente buenas como para encontrar otros artículos sobre el tema.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas