Spécifier dimensions <img> dynamique.

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par ortolojf, 29 Avril 2020.

  1. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 058
    J'aime reçus:
    12
    Bonjour

    J'ai amélioré mon site ( https://www.pronostics-courses.fr ), en mettant les Panneaux de Configuration à la sauce css table-cell, etc... ( avec des div ), et puis je bute sur le fait d'être obligé ( en Javascript ), d'utiliser un document.write() pour transmettre les largeurs d'écran à l'affichage.

    Google n'aimant pas les document.write(), j'ai mis ces instructions ci-dessous :

    HTML:
    
    <style>
    img.view2{border-collapse:collapse;border:thin solid #000;margin-left:auto;margin-right:auto;text-align:center;width:98%}
    </style>
    
    <div>
    <img class="view2" alt="Historique Courses Pass&eacute;es" itemscope itemtype="http://schema.org/ImageObject" itemprop="name" title="Historique Courses Pass&eacute;es" itemprop="image" src="https://www.pronostics-courses.fr/php/courses_anciennes/old_historique.php?FILENAME=resultats185027-290420.txt&amp;FIRST_PERIODE=8080&amp;LAST_PERIODE=8081&amp;PARAMS=a%3A12%3A%7Bi%3A0%3Bs%3A1%3A%221%22%3Bi%3A1%3Bs%3A1%3A%222%22%3Bi%3A2%3Bs%3A1%3A%223%22%3Bi%3A3%3Bs%3A1%3A%224%22%3Bi%3A4%3Bs%3A1%3A%225%22%3Bi%3A5%3Bs%3A1%3A%226%22%3Bi%3A6%3Bs%3A1%3A%227%22%3Bi%3A7%3Bs%3A1%3A%228%22%3Bi%3A8%3Bs%3A1%3A%229%22%3Bi%3A9%3Bs%3A2%3A%2210%22%3Bi%3A10%3Bs%3A2%3A%2211%22%3Bi%3A11%3Bs%3A2%3A%2212%22%3B%7D&amp;NUMCRS=185027&amp;WIDTH_SCREEN=1024&amp;HEIGHT_SCREEN=768" height="768" width="1024" />
    </div>
    
    
    Les WIDTH_SCREEN, HEIGHT_SCREEN, height et width, complètent les dimensions intrinsèques de l'image créée en PHP avec :

    PHP:

            $image 
    imagecreatetruecolor(($image_width 60), ($image_height $image_bar_height));

    Ma question : Comment afficher avec la même définition en pixels ( et laquelle ), sous tous les navigateurs clients ?

    Celà inclut tout : Mon propre ordinateur ( 1920px large ), les desktop, les smartphones, les tablettes et les phablettes.

    Ceci sans utiliser document.write() et Javascript ?

    Merci beaucoup de votre aide.

    Amicalement.
     
  2. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 486
    J'aime reçus:
    195
    En responsive, on met en CSS width: 100%; height: auto; pour l'image puis c'est tout, les paramètres height et width de la balise img sont facultatifs. Bien sûr ça fait charger inutilement une grosse image même sur mobile, c'est l'inconvénient du responsive, si on veut optimiser ça on fait plusieurs images, et on charge en background de la div en css dans le @media qui correspond au mobile ou desktop.
     
  3. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 026
    J'aime reçus:
    291
  4. passion
    passion WRInaute accro
    Inscrit:
    6 Janvier 2006
    Messages:
    3 774
    J'aime reçus:
    152
    Yo ! Tu te prends vraiment la tête à te compliquer la vie :eek:
    Si te prends l'envie d'améliorer le visuel alors passe par bootstrap !
    Ce sera un jeu d'enfants.

    1- Mettre des images en responsive tout en gardant le ratio hauteur/largeur ?
    https://getbootstrap.com/docs/4.4/content/images/
    Pas de soucis, il te suffit de renseigner l'attribut "img-responsive" dans ton image et le tour est joué :)

    2- Afficher ou pas des blocs en fonction du device ?
    Pas de soucis, tu renseignes dans la div correspondante "hidden-xs" ou "hidden-sm" etc...

    Bref... bootstrap répondra à toutes tes attentes et tes utilisateurs seront content d'avoir un affichage optimal :)

    enjoy :)
     
  5. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 058
    J'aime reçus:
    12
    Bonjour

    Merci beaucoup pour vos réponses.

    Maintenant sur Lighthouse de Chrome, j'ai tout 100% sauf accessibility à 96% - 97%.

    Je vais revoir mon audit RM-Tech prochainement.

    Merci beaucoup rick38 et spout pour votre aide.

    Merci beaucoup passion pour ta suggestion, c'est sympa, mais je préfère faire "from scratch".

    J'attendrai quelques mois avant de refaire un audit RM-Tech.

    Merci beaucoup à Wri pour ton site et RM-Tech, grâce à celà mon site a pu progresser durant toutes ces années.

    Amicalement.
     
  6. rick38
    rick38 WRInaute passionné
    Inscrit:
    23 Février 2013
    Messages:
    1 486
    J'aime reçus:
    195
    Ah oui srcset pour les différentes tailles.

    image-set() pour l'équivalent en css pour background-image mais pas encore supporté par Firefox a priori.
     
    #6 rick38, 1 Mai 2020
    Dernière édition: 1 Mai 2020
  7. yule
    yule WRInaute occasionnel
    Inscrit:
    24 Juillet 2004
    Messages:
    364
    J'aime reçus:
    18
    Bonjour,

    C'est dommage d'attendre, le conseil de @passion ! Et tu demanderas pourquoi tu ne l'a pas fait avant ! UN exemple sobre pour ton site sans logo img (mais logo texte, tout simple)

    Moi qui suis allergique au CMS, je ne jure que par Bootstrap ! Après, pas de couteau sous la gorge, c'est toi qui décide. Je trouve juste dommage que tout ton travail de fond, soit anéanti par l'aspect visuel.

    Bonne bonne
    Yule
     
  8. spout
    spout WRInaute accro
    Inscrit:
    14 Mai 2003
    Messages:
    9 026
    J'aime reçus:
    291
    Mais les gars, arrêtez de vous prendre la tête.
    S'il avait mis autant d’énergie dans son site qu'il n'a mis rien que dans les cookies, il serait le concurrent n°1 d'Unibet/PMU.

     
  9. ortolojf
    ortolojf WRInaute accro
    Inscrit:
    14 Août 2002
    Messages:
    3 058
    J'aime reçus:
    12
    spout...

    Merci beaucoup de ton appréciation élogieuse. ;)

    Mon interface de gestion de cookies est viable ?

    Merci beaucoup.

    Amicalement.
     
Chargement...
Similar Threads - Spécifier dimensions <img> Forum Date
specifier un jeu de caracteres Débuter en référencement 6 Mars 2012
spécifier un serveur de mails sur un autre serveur Administration d'un site Web 17 Novembre 2010
système de notation par étoiles : dimensions mini ? Administration d'un site Web 9 Octobre 2019
Faut il indiquer les dimensions des images ? Demandes d'avis et de conseils sur vos sites 12 Mai 2010
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice