es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

“El aspect-ratio de CSS no funciona correctamente en Firefox”.

11 Jun, 2023 Programación

Creé un div simple con la propiedad aspect-ratio como hijo de otro div. El div interior debe llenar todo el espacio posible (pero aún respetando la relación de aspecto pasada).

Funciona como se espera en navegadores basados en Chromium, pero en Firefox parece ignorar la relación de aspecto cuando se establece width: 100%, y el div interior se acaba estirando.

.box {
width: 100%;
max-height: 100%;
aspect-ratio: 1 / 1;
border: 2px dashed black;
background-color: lightblue;
}

.container {
height: 50vh;
}

Contenido de muestra

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Puede haber un problema de compatibilidad entre Firefox y la propiedad aspect-ratio. Para asegurarse de que el div interior respete la relación de aspecto pasada, una posible solución es utilizar el truco de padding.

    Así es como se puede modificar el CSS para el div interior:

    .box {
  position: relative;
  height: 0;
  padding-bottom: calc(100% / (1 / 1)); /* establecer el padding de la relación de aspecto */
  border: 2px dashed black;
  background-color: lightblue;
}

.box > * {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}

    Y modificar el HTML para incluir el contenido como hijo del div interior:

    <div class="container">
  <div class="box">
    <div>
      Contenido de muestra
    </div>
  </div>
</div>

    Al posicionar el div interior absolutamente dentro del div externo, y luego establecer su ancho y altura al 100%, el contenido llenará el espacio disponible mientras aún se respeta la relación de aspecto.

Comments are closed.