[RÉGLÉ] ajuster les photos

[Cosmic]

Bonjour
j'utilise un mélange d'action UP pour créer les 3 images en dessous de cette page (site en construction donc tout ne fonctionne pas)

https://j4.smilecollector.photos/index.php/fr/

{up flexauto=3 | tablet=2 | mobile=1 | class=fg-gap | style=text-align:center | css-head=#id img[width:100%]}

[URL="https://forum.joomla.fr/core/homepagef2flien"]{up image-logo=f2f | pos=left,top | class=badge-rouge m1 | main-class=bd-noir tc}[/URL]

[URL="https://forum.joomla.fr/core/homepagef2flien"]{up image-random=images/img/bouton/f2f}[/URL]

[URL="https://forum.joomla.fr/core/homepagef2flien"]{/up image-logo}[/URL]

{====}

[URL="https://forum.joomla.fr/core/homepagedanselien"]{up image-logo={up lang | en=dance | fr=danse} | pos=right,top | class=badge-rouge m1 | main-class=bd-noir tc}[/URL]

[URL="https://forum.joomla.fr/core/homepagedanselien"]{up image-random=images/img/bouton/danse}[/URL]

[URL="https://forum.joomla.fr/core/homepagedanselien"]{/up image-logo}[/URL]

{====}

[URL="https://forum.joomla.fr/core/homepagesportlien"]{up image-logo=sport | pos=right,top | class=badge-rouge m1 | main-class=bd-noir tc}[/URL]

[URL="https://forum.joomla.fr/core/homepagesportlien"]{up image-random=images/img/bouton/sport}[/URL]

[URL="https://forum.joomla.fr/core/homepagesportlien"]{/up image-logo}[/URL]

{/up flexauto}

Je me demandais s'il y avait un moyen de zoomer dans l'image de droite pour qu'elle ait la même taille que les autres sans être déformée
au lieu d'avoir un ratio 1000px x 563 px, je voudrais qu'elle ait un ratio 1000px/666px sans qu'il y ait de survol de la photo ou un effet visible
la photo est choisie aléatoirement donc ce n'est pas forcément la photo f2f qu'il faudra ajuster...

j'ai parfois des photos avec un format spécial et ça m'arrangerait vraiment bien

[lomart]

Bonjour Laurent,

J'adore voir les gens s'amuser avec UP

La solution à ton besoin passe par le CSS. Il suffit d'ajouter des propriétés aspect-ratio et object-fit à toutes les images.

{up image-random=images/img/bouton/sport | style=aspect-ratio:1;object-fit:cover}

Avec ce code, toutes tes images rempliront un carré.
Tu peux jouer sur la position de l'image avec https://developer.mozilla.org/fr/doc...bject-position

Pour éviter de répéter ces options, tu peux utiliser un prefset (https://up.lomart.fr/docs/articles/p...jeux-d-options)

Bonne journée

[lomart]

Bonjour Laurent,

J'adore voir les gens s'amuser avec UP

La solution à ton besoin passe par le CSS. Il suffit d'ajouter des propriétés aspect-ratio et object-fit à toutes les images.

{up image-random=images/img/bouton/sport | style=aspect-ratio:1;object-fit:cover}

Avec ce code, toutes tes images rempliront un carré.
Tu peux jouer sur la position de l'image avec https://developer.mozilla.org/fr/doc...bject-position

Pour éviter de répéter ces options, tu peux utiliser un prefset (https://up.lomart.fr/docs/articles/p...jeux-d-options)

Bonne journée

[Cosmic]

Salut

Avec ce code, toutes tes images rempliront un carré.

j'aimerai garder ce côté rectangulaire en alignant la plus "étroite" sur les autres (ou suis-je trop exigeant?)

J'adore voir les gens s'amuser avec UP

j'y passe parfois des heures avant de crier à l'aide mais c'est un outil génial

[lomart]

Je pensais que le photographe aurait reconnu dans aspect-ratio:1, le rapport d'homothétie du carré
Essaie avec 0.7 ou 1.4
object-fit:cover agrandira à minima les photos pour remplir ce rectangle

[Cosmic]

rhooo honte sur moi - la réponse était à ma portée
un tout grand merci m'sieur lomart