Bonjour.
Mon besoin :
j'ai un DIV qui contient une image
lorsque je réduis la fenetre du navigateur (response 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)
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 ?
Mon besoin :
j'ai un DIV qui contient une image
lorsque je réduis la fenetre du navigateur (response 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)
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 ?