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

WRInaute passionné
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 ?
 
WRInaute impliqué
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 :
Code:
<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;
">
 
WRInaute passionné
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 :
Code:
<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
 
WRInaute impliqué
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
 
WRInaute passionné
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
 
WRInaute passionné
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
 
WRInaute impliqué
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

Code:
<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.
 
Discussions similaires
Haut