[Résolu] Régle différente pour ne pas déformer une image sur la page b

Bonjour
L'image 150px est agrandie sur la page du blog https://cochanger.eu/
https://cochanger.eu/site-web/outil/en-10-minutes-obtenez-une-estimation-de-votre-empreinte-carbone-de-consommation-pour-agir-des-maintenant
ce qui rend l'apparence floue/incorrecte de cette miniature à côté des autres images qui sont réduites correctement.
Code:

<img ... largeur="150" hauteur="150" chargement="paresseux" data-path=.. > 

div.item-content> img{
	height: 280px!important;
	width: 100%;
	object-fit: cover;
}

Est-ce possible de d'avoir une règle CSS qui ne s'applique que si l'image fait plus de 280px ?
Modifié par HDcms (02 Dec 2022 - 15:32)

Salut,

Responsive Images : comprendre srcset et sizes

Dans ce cas précis le choix de la source ne va pas forcément aider, surtout que l'image ne sera pas forcément disponible au-delà de 150 pixels.

Je verrai plutôt une règle de ce style :

div.item-content > img {
    max-width: 100%;
    height: auto;
}

Donc, toute image supérieure à la largeur de son conteneur se verra limitée à 100% de largeur, a fortiori les images de tailles inférieures. La hauteur suivra grâce à height: auto. Avec cela pas besoin d'object-fit: cover.
Modifié par Olivier C (29 Nov 2022 - 13:49)

Bonjour
Merci à vous pour ces suggestions.
j'ai lu l'article et essayé la règle de style proposé.
Cela ne me convient pas car ecla fait un grand ecart entre les images qui font ~ 150px et les autres ~ 800px


J'ai essayé différentes alternatives en tournant autour sans succès.
je précises en plus d'avoir des images entre ~150px et ~ 800px que j'ai la main sur le css mais pas sur d'autres choses générées par le CMS ou les plugins (pour image notamment)
De plus je précise que d'autres personnes non familières avec les css peuvent des articles avec des images de tailles variables. Je ne vais donc pas mettre de class différentes manuellement.
Je cherche s'il y a moyen de détecter que l'image est inférieur ou supérieur à une taille pour appliquer la règle correspondante!?
Modifié par HDcms (29 Nov 2022 - 14:49)

Et du coup max-width ?

Olivier C a écrit :
Et du coup max-width ?

L'image publiée correspond à

div.item-content > img {
    max-width: 100%;
    height: auto;
}

je pense qu'il faut conserver object-fit: cover; qui est une bonne solution pour centrer des images de différentes tailles sauf ... si trop petites

Je crois qu'il y a une incompréhension du code : object-fit: cover c'est au cas où le ratio de l'image n'est pas respecté.

Oui je pense avoir compris cela même si je ne l'ai peut-être pas bien formulé, je voulais juste dire que c'était important de le conserver vu qu'il y a des images avec taille variable
Après comme personne n'en parle, je pense qu'il ne doit pas être possible actuellement de tester la taille d'une image pour appliquer une règle.
Si qq voit une piste, même dans qq temps ...
Merci
@+

HDcms a écrit :
Après comme personne n'en parle, je pense qu'il ne doit pas être possible actuellement de tester la taille d'une image pour appliquer une règle.

Si, comme l'avait déjà envisagé niuxe plus haut on pourrait utiliser les attributs srcset. Il y a plusieurs manières de les utiliser, dans votre cas il faudrait faire ce que l'on appelle de l' "Art direction" (un exemple ici).

Mais selon mon point de vu, utiliser cette technique pour l'appliquer à votre cas serait un mauvais design. En effet se serait détourner l'attribut - et même l'art direction - de son usage normal. Dans votre cas je me contenterais de laisser l'image à sa taille maximum en limitant la taille des plus grandes avec un max-width, c'est tout.
Modifié par Olivier C (29 Nov 2022 - 21:08)

Bonjour
J'ai lu l'article et regardé ton exemple. je ne vois pas trop comment faire et cela me semble bien compliqué par rapport au besoin.

Après, je ne sais pas ce que les visiteurs préfèrent ta solution (qui rendra des résumés d'articles avec des tailles variables, voir des différences importantes de tailles ou ce qui existe actuellement, mais avec un flou pour les petites images !)
Bon je vais attendre le retour de plus de personnes.

Je me demande aussi si les dimensions de l'image sont est détectable facilement en php?
N'hésitez pas à alimenter ce sujet si autres pistes.

Re
Ah sur le conseil du dev' du plugin de gestion image joomla, j'ai mis

div.item-content> img{	
	height: 280px!important;
	width: 100%;
	object-fit: contain;
}

Qu'en pensez-vous ?

par rapport à l'ancien

HDcms a écrit :
Qu'en pensez-vous ?

Je m'était engagé sur une mauvaise piste : je pensais qu'il fallait optimiser le rendu selon la qualité de l'image. Maintenant je vois qu'il ne s'agissait pas de cela : si le but du jeu est de toujours conserver la hauteur à 150px, alors la solution proposée par le dev' du plugin est tout à fait correcte.
Modifié par Olivier C (01 Dec 2022 - 22:22)

Bonjour
Je cherchais effectivement à améliorer le rendu des petites images, mais en réduisant les écarts sur la partie blog pour ne pas avoir des petits logos et grandes images.
Nous étions prêt à faire le compromis suivant qui n'est peut-être pas l 'idéal pour certaines images mais bon; cette modification simple produit un meilleur rendu!
Réutiliser sur https://clibre.eu/