/ / Utiliser Image Responsive avec Flexbox - html, css, responsive-design, flexbox

Utiliser Responsive Image avec Flexbox - html, css, responsive-design, flexbox

Je veux utiliser la flexbox et l'image réactive (l'image avec scrset et sizes). Mais le résultat semble horrible. Les images ont une hauteur différente même si j'ai utilisé flex-grow pour tirer aligné, car le navigateur chargera l'image différente avec des tailles différentes. Je veux que la hauteur de toutes les images soit la même.

j'ai découvert sizes d’images est difficile à définir si j’utilise flexbox, c’est imprévisible. Y at-il un moyen de résoudre ce problème?

Ici est le JSfiddle (S'il vous plaît redimensionner la fenêtre de résultat plus grande et le j'ai utilisé en ligne css pour flex-grow)

Réponses:

0 pour la réponse № 1

Définissez la propriété de hauteur d'image sur:

height:100%;

Et si vous souhaitez que toutes vos images soient de la même taille, définissez la même valeur pour la flexibilité.

flex-grow:1;