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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par saluts92, 28 Juin 2022.

  1. saluts92
    saluts92 WRInaute passionné
    Inscrit:
    12 Avril 2006
    Messages:
    1 016
    J'aime reçus:
    44
    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 ?
     
    #1 saluts92, 28 Juin 2022
  2. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    675
    J'aime reçus:
    111
    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;
">
     
    #2 colonies, 28 Juin 2022
  3. saluts92
    saluts92 WRInaute passionné
    Inscrit:
    12 Avril 2006
    Messages:
    1 016
    J'aime reçus:
    44
    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
     
    #3 saluts92, 28 Juin 2022
  4. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    675
    J'aime reçus:
    111
    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
     
    #4 colonies, 28 Juin 2022
  5. saluts92
    saluts92 WRInaute passionné
    Inscrit:
    12 Avril 2006
    Messages:
    1 016
    J'aime reçus:
    44
    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
     
    #5 saluts92, 28 Juin 2022
  6. ABCWEB
    ABCWEB WRInaute passionné
    Inscrit:
    22 Octobre 2015
    Messages:
    1 322
    J'aime reçus:
    173
    tu peux mettre ton image en background de ta div ça peut jouer
     
    #6 ABCWEB, 29 Juin 2022
  7. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    675
    J'aime reçus:
    111
    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.
     
    #7 colonies, 29 Juin 2022
  8. saluts92
    saluts92 WRInaute passionné
    Inscrit:
    12 Avril 2006
    Messages:
    1 016
    J'aime reçus:
    44
    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
     
    #8 saluts92, 29 Juin 2022
  9. colonies
    colonies WRInaute impliqué
    Inscrit:
    10 Septembre 2006
    Messages:
    675
    J'aime reçus:
    111
    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.
     
    #9 colonies, 29 Juin 2022
  10. saluts92
    saluts92 WRInaute passionné
    Inscrit:
    12 Avril 2006
    Messages:
    1 016
    J'aime reçus:
    44
    merci
     
    #10 saluts92, 29 Juin 2022
  11. saluts92
    saluts92 WRInaute passionné
    Inscrit:
    12 Avril 2006
    Messages:
    1 016
    J'aime reçus:
    44
    JE viens de finir mes tests, c'est parfait, merci encore
     
    #11 saluts92, 4 Juillet 2022
(Vous devez vous identifier ou vous inscrire pour poster ici.)
Chargement...
Similar Threads - grande image centrer Forum Date
Comment avoir de grandes images dans google image? Débuter en référencement 17 Avril 2016
CSS : rollover d'une image plus grande que la zone lien Développement d'un site Web ou d'une appli mobile 14 Avril 2006
Ouvrir une image grande tout en la visualisant plein écran.. Développement d'un site Web ou d'une appli mobile 25 Septembre 2005
suppression d'une grande quantité urls piratées Crawl et indexation Google, sitemaps 24 Février 2022
Récupérer les 10 plus grandes valeurs dans un fichier JSON Développement d'un site Web ou d'une appli mobile 18 Novembre 2021
les grandes villes par département Le café de WebRankInfo 23 Février 2020
Votre avis m'intéresse grandement ! Demandes d'avis et de conseils sur vos sites 31 Octobre 2018
Google a désindexé la grande majorité des pages de mon site pour une raison inconnue Problèmes de référencement spécifiques à vos sites 24 Octobre 2018
Comment distribuer un PDF gratuitement à grande échelle ? Rédaction web et référencement 4 Juillet 2016
Les grandes qualités d'un Site Web optimisé SEO Référencement Google 27 Août 2012
Le grande retour du PR ou coïncidence ? Netlinking, backlinks, liens et redirections 29 Juin 2012
AdWords : extensions d'annonces grandes tailles AdWords 20 Février 2012
refencecement site fleuriste autres que grandes villes proposées Débuter en référencement 17 Janvier 2012
Référencement 2012 : conseils et grandes tendances SEO Référencement Google 2 Janvier 2012
Un gros nombre de backlink, puis une baisse aussi grande, conséquence ? Débuter en référencement 13 Avril 2011
Référencement 2011 dans les grandes entreprises : conseils de Matt Cutts Référencement Google 11 Mars 2011
Meta-tag, données non visibles pour l'internaute selon le Tribunal de Grande Instance... Droit du web (juridique, fiscalité...) 28 Janvier 2011
Base de donnné trop grande ovh Administration d'un site Web 9 Décembre 2010
Grande difference de referencement de google.com a .fr Référencement international (langues, pays) 21 Septembre 2010
Google trouve la grande faille de sécurité de Win XP Google : l'entreprise, les sites web, les services 14 Juin 2010