grande image centrer verticalement dans DIV avec largeur variable de l'ecran

[saluts92]

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 ?

 

[colonies]

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

object-fit:cover s'utilise directement sur le tag img.
C'est parfaitement adapté au responsive : tu définis les vraies dimensions de l'image dans le tag (celle du fichier quand tu l'ouvres en taille réelle, pas celles à afficher dans le navigateur), et tu lui appliques un style qui donne les règles des dimensions à afficher dans le navigateur, par exemple :

<img
src="https://d3bzkjkd62gi12.cloudfront.net/img/original/field_school2016__133_1.jpg"
width=4104
height=2737
style="
   object-fit: cover;
   object-position: bottom;
   height: 50vh;
   min-height: 175px;
   max-height: 600px;
   width: 100%;
   max-width: 1600px;
   margin: 0 auto;
   display: block;
">

 

[saluts92]

object-fit:cover s'utilise directement sur le tag img.
C'est parfaitement adapté au responsive : tu définis les vraies dimensions de l'image dans le tag (celle du fichier quand tu l'ouvres en taille réelle, pas celles à afficher dans le navigateur), et tu lui appliques un style qui donne les règles des dimensions à afficher dans le navigateur, par exemple :

<img
src="https://d3bzkjkd62gi12.cloudfront.net/img/original/field_school2016__133_1.jpg"
width=4104
height=2737
style="
   object-fit: cover;
   object-position: bottom;
   height: 50vh;
   min-height: 175px;
   max-height: 600px;
   width: 100%;
   max-width: 1600px;
   margin: 0 auto;
   display: block;
">

merci, mais cela ne répond pas vraiment à mon besoin

admettons que j'ai une image de largeur 400 et de hauteur 800 en mode desktop

quand je passe en dessous des 1000 pixels par exemple, je ne veux plus voir que 400 x 600, et que l'image soit centrer verticalement dans es 600 de hauteur

 

[colonies]

quand je passe en dessous des 1000 pixels par exemple, je ne veux plus voir que 400 x 600, et que l'image soit centrer verticalement dans es 600 de hauteur

object-fit définit un cadre dans laquelle l'image est centrée, c'est ce que tu veux.

Dans mon exemple, j'utilise des proportions par rapport à la taille de la fenêtre et des limites. Mais si tu veux que le comportement change à partir (ou en-dessous) d'une certaine dimension, tu dois combiner object-fit et une media query : https://www.alsacreations.com/article/lire/930-css3-media-queries.html

 

[saluts92]

object-fit définit un cadre dans laquelle l'image est centrée, c'est ce que tu veux.

non pas exactement

par exemple: si j'ai un DIV de 400x600 et que l'image fait 400x800, je veux que l'image soit centrée veticalement pour ne faire apparaitre que les 600 du milieu : rognant 100 pixels en haut et 100 pixels en bas

 

[ABCWEB]

non pas exactement

par exemple: si j'ai un DIV de 400x600 et que l'image fait 400x800, je veux que l'image soit centrée veticalement pour ne faire apparaitre que les 600 du milieu : rognant 100 pixels en haut et 100 pixels en bas

tu peux mettre ton image en background de ta div ça peut jouer

 

[colonies]

par exemple: si j'ai un DIV de 400x600 et que l'image fait 400x800, je veux que l'image soit centrée veticalement pour ne faire apparaitre que les 600 du milieu : rognant 100 pixels en haut et 100 pixels en bas

<img src="https://via.placeholder.com/400x800.png?text=400%20x%20800"
width=400
height=800
style="object-fit:cover; width:400px; height:600px">

fait exactement ça

Encore une fois : ça s'applique directement à l'image, pas à un div qui contient l'image.

 

[saluts92]

fait exactement ça

merci, ça à l'air de fonctionner, je finalise des tests plus tard dans la semaine

par contre je lis que "object-fit:cover" ce n'est pas compatible avec IE, meme les versions les plus récentes

 

[colonies]

par contre je lis que "object-fit:cover" ce n'est pas compatible avec IE, meme les versions les plus récentes

On est en 2022, IE est bel et bien mort (officiellement depuis le 15 juin https://www.microsoft.com/en-us/download/internet-explorer.aspx mais même MS ne le supporte plus pour ses services web depuis un bon moment).
Edge est maintenant basé sur le même moteur que Chrome et supporte object-fit.

 

[saluts92]

Edge est maintenant basé sur le même moteur que Chrome et supporte object-fit

merci

 

[saluts92]

fait exactement ça

JE viens de finir mes tests, c'est parfait, merci encore