Spécifier dimensions <img> dynamique.

[ortolojf]

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 :

<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 :

        $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.

 

[rick38]

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.

 

[spout]

La solution c'est avec srcset : https://www.alsacreations.com/article/lire/1621-responsive-images-srcset.html

 

[passion]

Yo ! Tu te prends vraiment la tête à te compliquer la vie
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

 

[ortolojf]

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.

 

[rick38]

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.

 

[yule]

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

 

[spout]

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.

Il n'y a pire sourd que celui qui ne veux entendre.

 

[ortolojf]

spout...

Merci beaucoup de ton appréciation élogieuse.

Mon interface de gestion de cookies est viable ?

Merci beaucoup.

Amicalement.