[Résolu] Flexbox et images

Bonjour

Je suis entrain de faire une page avec flexbox, sur mon layout j'essaie d'harmoniser la hauteur de aside1 avec la carte située à sa droite.

En 1260 px nikel.
Des que je joue sur la taille de la fenêtre pour contrôler le responsive, le résultat n'est pas terrible dans la mesure ou l'image représentant la carte s'adapte à sa box laissant un espace trop important en bas de box.
Avez vous une astuce à me proposer ? une solution ... ?

http://goxo.eu/flex/layout.html

Merci

Bon Dimanche

BB


Ps: Je viens de recevoir le livre de Raphaël (CSS flexbox) coool ......!
Modifié par africa (28 Feb 2016 - 12:14)

Bonjour,

Ètape 1 : placer aside 2 au dessous de la carte dès que celle-ci est moins haute que aside 1
Ètape 2 : placer aside 1 au dessus de la carte dès que la carte est à nouveau moins haute que aside 1

Amicalement,

Bonjour parsimonhi


Merci, très réactif et précis comme d'habitude, Super coool .....

Je vais essayer

Bon dimanche

Amicalement

BB


Pas facile ...! Je n'y arrive pas
Je vais persévérer
Modifié par africa (28 Feb 2016 - 12:16)

africa a écrit :
Des que je joue sur la taille de la fenêtre pour contrôler le responsive, le résultat n'est pas terrible dans la mesure ou l'image représentant la carte s'adapte à sa box laissant un espace trop important en bas de box.
Avez vous une astuce à me proposer ? une solution ... ?

Bonjour. Si l'information de la carte est centrée et que vous ne voyez pas d'inconvénient à la voir rogner vous pouvez toujours injecter l'image via CSS en background-image directement sur <article>, accompagné d'un backgound-size:cover.

Bonjour Olivier

Je vous remercie, j'ai fait l'essai ..... Je vais continué afin d'avoir la carte en entier

Bon Dimanche

Bnsoir,

en patientant tu peut mettre article en display:flex; et ajouter margin:auto; à ton image.cela la centrera verticalement.

Hello,

africa a écrit :

Avez vous une astuce à me proposer ? une solution ... ?

Peut-être du côté de object-fit ? Cela permet de conserver le ratio de l'image tout en imposant une largeur et une hauteur (par ex. 100%). C'est un peu l'équivalent du background-size: cover des images de fond.

Article sur le sujet : https://la-cascade.io/utiliser-css-object-fit/

(PS : j'en parle dans mon livre Flexbox justement )

Merci gcyrillus et Raphaël

Avec toutes ces pistes je vais me débrouiller

Raphaël, super ton livre sur flexbox, je ne suis pas encore arrivé au bout ...

Merci


Bonne journée

Amicalement
BB

Merci beaucoup