Discussion :

[saluts92]

Bonjour.
Mon besoin :
j'ai un DIV qui contient une image
lorsque je réduis la fenetre du navigateur (responsive design), en dessous de 1000 px (par exemple) je veux que l'image se réduise en enlevant un peu en haut et un peu en bas (centrer verticelement par rapport au conteneur)

j'ai essayé la méthode "object-fit:cover", mais celle -ci demande des dimensions "en durs" pour le DIV et même pour l'image : et cela ne convient pas au principe du responsive design

j'ai essayé avec du javacript : ça fonctionne mal, car je charge ces images en lazy-loading et le script, meme en l'exéuctant aprèsle load de la page peut ne pas fonctionner correctement selon la vitesse de chargement de l'image.

j'ai également utilisé les balises HTML PICTURE avec SRCSET, mais cela implique que je mette pas d'attribut WIDTH et HEIGHT à ma balise IMG, et cela provoque du temps de CLS (Google insight) puisque le navigateur n'a pas d'espace à réserver

Une solution svp ?

[mathieu]

essayez peut-être avec une mise en page flex comme cela :
https://codesandbox.io/s/nice-waterf...src/styles.css

[saluts92]

merci mais cela ne répond pas à ma problématique qui est que l'image est plus haute que le conteneur

[mathieu]

donc l'affichage de départ est plutôt comme cela avec le haut et le bas de l'image qui n'apparaissent pas ?
https://codesandbox.io/s/gracious-br...src/styles.css

et ensuite vous ne voulez pas que l'image change de taille pour les différents largeurs ?
sur le lien avec le code de test, vous pouvez cliquer sur "fork" en haut à droite pour nous donner plus de détails sur ce que vous avez.

[saluts92]

merci grace à vous, j'ai avancé à grand pas, cela fait ce que j'espérais

reste cependant un détail : en effet meme si l'image est tronqué grace à overglow:hidden en dessous du DIV l'espace (relatif au morceau bas de l'image) est quand même réservé : donc espace blanc

alors que en haut il n'y a aucun soucis

en fait c'est le display:flex qui crée ce phénomène parceque avec un display:block il n'y a plus d'espace

[mathieu]

j'ai rajouté l'attribut de chargement "lazy" et je ne vois pas ce dont vous parlez :
https://codesandbox.io/s/brave-cooki...le=/index.html

je précise que j'ai seulement testé avec la dernière version de firefox mais d'après caniuse, ça devrait fonctionner de la même façon avec la majorité des navigateurs actuels :
https://caniuse.com/loading-lazy-attr

[saluts92]

cela n'a rien à voir avec le lazy


en fait c'est le display:flex qui crée ce phénomène par ce qu'avec un display:block (mais là on n'a plus le centrage) il n'y a plus d'espace cet espace représentant le bout du bas de la photo qui n'est pas affiché

[mathieu]

montrez nous un exemple testable, ça sera plus compréhensible.