Centrar un div que mantiene la relación de aspecto cuando hay margen corporal

 

 

 

Andrew Welch tuvo un pequeño desafío CSS el otro día para crear un div normal:

• centrado verticalmente + horizontalmente
• se escala para ajustarse a la ventana gráfica con un margen alrededor
• mantiene una relación de aspecto arbitraria
• Sin JS

Hay un vídeo en ese tweet si te ayuda a visualizar el desafío. El otro día también vi a Paul Bakaus escribiendo en un blog sobre esto, ¡así que es algo que surge!

A Mark Huot se le ocurrió aplicar relaciones de aspecto directamente con width/ heighty crear los márgenes restando de esas dimensiones:

La idea de Amelia Wattenberger es configurar height/ widthy max-height/ max-widthcon unidades de ventana gráfica y centrarlo con el translatetruco clásico:

 

Eric A. Meyer hizo lo mismo, solo que se centró con flexbox.

Brian Hart usó vminunidades para el tamaño de la relación de aspecto y lo centrado con flexbox:

Benoît Rouleau hizo lo mismo pero usó calc()para los márgenes en una unidad diferente.

A Andrew realmente le gusta el enfoque de Jonathan Melville. La mayor parte está en las clases de Tailwind, por lo que es un poco difícil de entender para mí, ya que todavía no estoy acostumbrado a mirar a códigos como ese.

Andrew dijo que finalmente optó por esa vmincosa, aunque veo que está usando calc()para reiniciar vminunidades entre sí, lo cual no es realmente necesario a menos que, supongo, quieras ver las matemáticas.






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Centrar un div que mantiene la relación de aspecto cuando hay margen corporal

Centrar un div que mantiene la relación de aspecto cuando hay margen corporal

• centrado verticalmente + horizontalmente• se escala para ajustarse a la ventana gráfica con un margen alrededor• mantiene una relación de aspecto arb

programar

es

https://pseint.es/static/images/programar-centrar-un-div-que-mantiene-la-relacion-de-aspecto-cuando-hay-margen-corporal-1256-0.jpg

2024-06-13

 

Centrar un div que mantiene la relación de aspecto cuando hay margen corporal
Centrar un div que mantiene la relación de aspecto cuando hay margen corporal

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences