28172 sujets

CSS et mise en forme, CSS3

Largeur max pour hauteur ou largeur

Bonjour
je pensais avoir fait cela, mais non, j'utilisais une méthode dans le cms qui permet d'enregistrer une image avec un maximum de 800px pour la hauteur ou la largeur.
Je cherche un équivalent, sans perdre le ratio.
J'ai vu qu'il y avait des paramètres peut-être plus récent
Quand j'essaie d'ajouter max-height: 800px;

.com-content-article__body .acfup-item img {
    float: left;
    margin-right: 10px;
    max-height: 800px;
}

cela déforme le tout, car j'ai probablement, un autre paramètre que je ne gère pas

img[Style d'attributs] {
    width: 1024px;
    aspect-ratio: auto 1024 / 1445;
    height: 1445px;
}


https://v2.alterweb.info/index.php?option=com_content&view=article&id=144:pour-une-societe-contributive&catid=9&lang=fr&Itemid=113
Comment faire pour avoir 800px max en hauteur et largeur 600px (à vue de nez! car j'ai plus d'image verticale (couverture livre) qu'horizontale (logo) ?
J'essaierais un truc du genre :
img { 
		height: auto; 
		width: 600px;
		max-height: 800px; 
		object-fit: contain; 
		}
Bonjour
Merci beaucoup, néanmoins il y a un effet de bord que j'avais déjà vu et qui provient du fait qu'il y a des images assez différentes sur ce site et un autre similaire (couverture de livre plutôt haute, logo plutôt petit, parfois carré et certaines images plutôt large ...
Comment faire pour gérer toutes ces contraintes ?
Est-ce que l'on peut dire en dehors de telle taille de l'image (hauteur, ou largeur) on ne fait rien ? ou appliqué plusieurs régles?

Ex du logo qui est agrandi sur https://v2.alterweb.info/index.php?option=com_content&view=article&id=125:agir-pour-lenvironnement&catid=20&Itemid=158&lang=fr
Modifié par HDcms (12 May 2023 - 09:47)
Administrateur
Bonjour,

si la largeur de l'image ou plutôt de l'emplacement de l'image n'est pas imposé, le plus simple est de remplacer width par max-width: 600px;
Avec le cas d'un logo vraiment tout petit, ajouter min-width
Le souci est que le début du texte va varier d'une page à l'autre : est-ce gênant pour l'utilisateur ? (faut tester, sachant qu'il va pas zapper d'une page à l'autre mais rester quelques secondes ou minutes à lire si j'en juge par le contenu du site Smiley smile )

Pour aller plus loin, je déplacerais le dimensionnement depuis l'image vers le span parent.
.acfup_item {
  float: left;
  display: flex;
  align-items: center;
  min-width: 300px;
  max-width: 600px;
  max-height: 800px;
  justify-content: center;
  margin: 10px;
  background: lightyellow; /* debug */
}

et virer de l'img 3 propriétés float, margin, width

Il faut ensuite que tu saches quel résultat tu souhaites dans chaque cas (image petite, haute, large, carrée sur mobile, tablette, desktop et allez 4K, contenu trop court pour repasser sous le bloc flottant si ça existe vs contenu textuel long) et que tu colles les différents cas l'un en dessous de l'autre dans une seule page et que tu testes.

Turfu ? Il y a bien les Container Queries qui pourraient ou non t'être utiles ; cela permet à un composant de réagir à la taille qu'il fait.
Pas entendu parler pour des images, c'est pensé pour des composants genre pagination, card, etc que l'on peut restyler selon leurs dimensions et non celle de la page mais je lance l'idée...
Support Fx 110 et Saf 16 : c'est enfin supporté partout mais très récemment.
Mais le problème de fond n'est pas CSS, ce sont les images pas adaptées à leur usage (c'est l'histoire du client qui t'envoie son logo en JPG bien compressé, largeur 128px. Une pensée pour les imprimeurs qui connaissent l'histoire depuis fort longtemps Smiley ravi )
Meilleure solution
Bonjour
Super merci et en plus d'avoir pris du temps sur un week end Smiley smile
Oui tu as bien compris, j'ai essayé de tester avec le plus de cas de figure réel différent (couverture de livre plutôt haute, logo plutôt petit, parfois carré et certaines images plutôt large ...). Après difficile d'envisager tous les cas. S'il ya une image sur 100 qui est problématique, peut-être leur faire changer ? car effectivement, on sera dépendant de ce qu'ils enverront par formulaire ou mail. Nous avons plus de problème que les imprimeurs car les écrans peuvent effectivement extrêmement différents?; je me suis cantonné à l'écran ~1440 - 1920px ou le smartphone. En tant que petite asso, nous n'avons pas les moyens de vraiment tester tous les types d'écrans et public malheureusement. Nous essayons d'être le plus accessible possible. Seule chose gérée, c'est de convertir les images automatiquement en webp.
On s'approche de nos souhaits tout en étant dans l'état d'esprit de faire au mieux Smiley smile

Après je n'ai pas compris
a écrit :
Turfu ? Il y a bien les Container Queries qui pourraient ou non t'être utiles ; cela permet à un composant de réagir à la taille qu'il fait.
Pas entendu parler pour des images, c'est pensé pour des composants genre pagination, card, etc que l'on peut restyler selon leurs dimensions et non celle de la page mais je lance l'idée...
Support Fx 110 et Saf 16 : c'est enfin supporté partout mais très récemment.

Si ce n'est peut-être qu'à surveiller cela pour l'avenir ?
Modifié par HDcms (15 May 2023 - 10:56)
Prévenir un modérateur
Répondre au sujet
Aller à