html - pantalla - ¿Por qué el ancho y la altura de un elemento flexible afectan la forma en que se representa un elemento flexible?

hacer que un div ocupe todo el alto

Question

Una imagen en un flexbox que tiene un estilo de max-height parece mostrarse de manera diferente dependiendo de si tiene sus atributos de height y width establecidos.

El que tiene los atributos, establecidos en el ancho / alto real de la imagen, se renderiza con su relación de aspecto preservada, pero los que no tienen los atributos respetan la max-height y aparecen aplastados.

.flex-parent {
  display: flex;
  max-height: 10vh;
}

<div class="flex-parent">
  <img                          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>

Así es como aparece en Chrome 58 (y aparece de manera similar en Firefox 54).

¿Por qué rinden de manera diferente? ¿Cuáles son las reglas que rigen este comportamiento?

Mi entendimiento (obviamente incorrecto) es que los atributos de altura y ancho sobrescriben la altura y el ancho intrínsecos que se encuentran cuando se carga la imagen, y si los atributos de altura y ancho son iguales a las dimensiones de la imagen, no debería haber diferencia en el renderizado una vez que la imagen ha cargado

El contexto es hacer una página con imágenes receptivas, donde cada imagen

• puede tener dimensiones originales únicas
• no causa un reflujo cuando está cargado, es decir, el espacio correcto está reservado en el procesamiento inicial (por lo tanto, usa atributos de altura y ancho)
• puede caber todo en la pantalla a la vez (por lo tanto, me juego con vh en el CSS)

La imagen de la rana es de https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg

Answer 1

Aquí ha escrito max-height: 10vh, vh no es compatible con ningún navegador, excepto con el último iOS 6. Esto se aplica a todas las unidades de longitud relacionadas con ventanas. use otros valores en lugar de Vh esto funcionará bien. Por favor, lea este blog https://css-tricks.com/the-lengths-of-css/ .

.flex-parent {
  display: flex;
  max-height:  max-content;
}

<div class="flex-parent">
  <img                          src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>

Answer 2

El problema es donde establece la altura máxima. La altura máxima de la propiedad CSS no se hereda de manera predeterminada. Su declaración css crea un div que es 10% de la altura de la ventana gráfica. La imagen sin dimensiones se redujo en función de sus dimensiones principales. La imagen en la que estableces las dimensiones implícitas siempre será esas dimensiones. Dependiendo del tamaño del div, puede desbordarse. Si coloca la propiedad de altura máxima en la primera imagen, debería cambiar el tamaño manteniendo la relación de aspecto igual.

Answer 3

Intenté leer las especificaciones de w3c flexbox y tropecé con this . Dice que

Para cada dimensión, si esa dimensión del cuadro de contenido del contenedor flexible es de un tamaño definido, use eso; si esa dimensión del contenedor flexible se dimensiona bajo una restricción de contenido mínimo o máximo, el espacio disponible en esa dimensión es esa restricción.

De lo contrario, reste el margen, el borde y el relleno del contenedor flexible del espacio disponible para el contenedor flexible en esa dimensión y use ese valor que podría dar como resultado un valor infinito.

Espero que esto ayude.

Answer 4

Una configuración inicial de un contenedor flexible es align-items: stretch .

Eso significa que los artículos flexibles se expandirán a través del eje transversal del contenedor.

En un contenedor de dirección de fila, como en la pregunta, el eje transversal es vertical.

Eso significa que los artículos (imágenes, en este caso) cubrirán la altura completa del contenedor.

Sin embargo, cuando un elemento flexible tiene un tamaño cruzado definido, eso anula el valor predeterminado del stretch .

De la especificación:

8.3. Alineación de ejes cruzados: los align-items align-self propiedades de align-self

Los elementos Flex se pueden alinear en el eje transversal de la línea actual del contenedor flexible, de forma similar al justify-content pero en la dirección perpendicular.

stretch

Si la propiedad del tamaño transversal del elemento flexible se computa en auto , y ninguno de los márgenes del eje cruzado es auto , el elemento flexible se estira.

Este es el lenguaje clave:

Si la propiedad de tamaño cruzado del elemento flexible se computa en auto

Y así es como la especificación define "propiedad de tamaño cruzado":

El ancho o alto de un elemento flexible, cualquiera que esté en la dimensión transversal, es el tamaño cruzado del artículo. La propiedad de tamaño cruzado es cualquiera de width o height que esté en la dimensión transversal.

^{https://www.w3.org/TR/css-flexbox-1/#cross-size-property}

Entonces parece que su código se está reproduciendo como se define en la especificación.

Esto es lo que tienes:

.flex-parent {
  display: flex;
  max-height: 10vh;
}

<div class="flex-parent">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
</div>

La primera imagen no tiene un ancho definido (tamaño principal) o alto (tamaño de cruz), ni en el CSS ni en el HTML. Su tamaño cruzado, por lo tanto, se calcula en auto .

Esta declaración:

Si la propiedad de tamaño cruzado del elemento flexible se computa en auto

... es verdadero y align-items: stretch entra en vigor.

La imagen se expande a través de la altura del contenedor, que es de 10 px.

La segunda imagen , sin embargo, tiene un tamaño explícito. El tamaño cruzado se define en el HTML ( height="240" ).

Ahora esta declaración:

Si la propiedad de tamaño cruzado del elemento flexible se computa en auto

... es falso, y align-items: stretch se anula. El atributo de height HTML prevalece.

Dos notas sobre la segunda imagen:

1. La imagen ignora el límite de max-height en el contenedor porque una configuración inicial en CSS es overflow: visible .
2. Los atributos HTML de width y height correlacionan con sus respectivas propiedades de CSS. Por lo tanto, height="240" anula la height: auto default. Vea a continuación las referencias de especificaciones. *

Hay otros dos problemas a considerar al renderizar imágenes en un contenedor flexible.

1. El tamaño mínimo predeterminado de los elementos Flex. Esta configuración evita que los artículos flexibles se contraigan por debajo del tamaño de su contenido. Lea esta publicación para más detalles:

   • ¿Por qué el elemento flexible no se contrae pasado el tamaño del contenido?

2. Comportamiento variable entre los principales navegadores. Firefox, Chrome, Safari, Edge e IE11 no siempre representan imágenes como elementos flexibles de la misma manera. Lea esta publicación para más detalles:

   • Flex en Firefox reduce las imágenes automáticamente, pero no en Chrome

Teniendo en cuenta todos los factores anteriores, esta es mi solución sugerida:

.flex-parent {
  display: flex;
  max-height: 50vh; /* adjusted for demo */
}

.flex-parent {
  min-width: 0;
}

img {
  width: 100%;
  height: auto;
}

<div class="flex-parent">
  <div>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  </div>
  <div>
    <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg">
  </div>
</div>

* Los atributos HTML de width y height correlacionan con sus respectivas propiedades de CSS. Por lo tanto, cuando se especifica, anulan los valores predeterminados de CSS. De la especificación de HTML5:

10.4.3 Atributos para contenido e imágenes incrustados

Los atributos de width y height en los elementos applet , embed , iframe , object o video y elementos de input con un atributo de type en el estado Image Button y que representa una imagen o que el usuario espera que eventualmente represente una imagen, un mapa a la dimensión propiedades width y height en el elemento respectivamente.

10.2 La hoja de estilo de agente de usuario de CSS y consejos de presentación

Cuando el texto siguiente dice que un atributo de un elemento se correlaciona con la propiedad (o propiedades) de la dimensión , significa que si el elemento tiene un atributo establecido, y el análisis del valor del atributo usando las reglas para analizar valores de dimensión no genera un error , se espera que el agente de usuario use la dimensión analizada como el valor de una sugerencia de presentación para las propiedades, con el valor dado como una longitud de píxel si la dimensión era un número entero, y con el valor dado como un porcentaje si la dimensión era una porcentaje.