1486 sujets

Web Mobile et responsive web design

Ajustement image et texte

Salut,
Comme tu as mis le texte dans figcaption, la souplesse d'une grille est perdue. Figcaption est plutôt fait pour les textes courts. Ce que je ferais, c'est mettre l'image dans une grille et le texte dans une autre. En responsive, ils vont s'étirer ensembles. Par contre, il faudra voir avec le ratio de l'image (largeur/hauteur).
D'autant plus qu'au-delà de 800 px, ton image n'est plus responsive, alors que ton texte l'est toujours.
Dans cette situation, ce serait peut-être mieux d'utiliser float-left (ou right), afin que le texte contourne l'image quand il est plus grand. Quand il est plus petit, ça gène moins.
Je propose, mais je n'ai pas testé, c'est un peu long à mettre en place.
En tous cas, question intéressante.
Merci de ta réponse.
J'avais commencé à utiliser un float,mais je n'aimais pas le résultat, d'où ma <figure>
Je peux bien entendu calculer l'ajustement par JS sur évènement resize, mais c'est un peu compliqué, je vais laisser comme ça.
Tu ne peux pas en fait il faut voir le "problème" dans l'autre sens. Si tu veux conserver le ratio de l'image pour l'avoir entièrement c'est le texte qui devrait s'agrandir ou rétrécir.

Par contre si c'était juste un fond quelconque, tu pourrais paser par flex, appliquer un height 100% à ton conteneur image, et mettre l'image en background cover ou object-fit cover
Modifié par Pedrothelion (18 Nov 2024 - 17:19)
Modérateur
Bonjour,

Je pense aussi que flex serait utile ici, mais pour garder la déco lisible, une solution serait de repasser les textes dans le HTML avec le logo et un fond légèrement opaque, puis passer en background la végétation luxuriante Smiley smile , exit le problème de ratio.

exemple de l'idée : https://codepen.io/gc-nomade/pen/dyxEJbQ

<conteneur en flex>
     <aside en 1/3.5~ et mini a 100px en flex ou grid fd luxuriant>
         <encart a fond verdâtre légèrement translucide en marge auto>
             <logo img transparente en alt vide>
              <les textes>
          </encart>
      </aside>
      <contenu en flex 2.75>
           <textes />
       </contenu>
</conteneur>


Ne pas s’intéresser aux bidouilles sur le CSS du logo, je n'ai trouver qu'une seule image en jpg et noir et blanc. Si elle est de bonne taille et transparente, il n'y aura pas besoin de la styler, à la rigueur un max-width.

Cordialement
Modifié par gcyrillus (19 Nov 2024 - 11:46)
Merci, je vais essayer ça, mais d'abord je vais essayer de comprendre le comment du pourquoi de cette solution. Pour le moment c'est loin d'être évident pour mon vieil esprit fatigué...
Smiley eek Smiley cligne
Pour autant que je comprenne, je dois demander à la personne qui a fait l'image .jpg de me la renvoyer en .psd et séparer le fond et le texte, garder le fond en .png et remettre le texte en html ? Effectivement c'est une très bonne idée que j'aurais dû avoir, mais je n'ai plus la vivacité d'esprit que j'avais il y a 50 ans... Smiley vieux
Modérateur
oui c'est ça,
Pour la font, ce serai quelque chose comme Cormorant Garamond , du moins cela y ressemble .

cdt
gcyrillus a écrit :
oui c'est ça,
Pour la font, ce serai quelque chose comme Cormorant Garamond , du moins cela y ressemble .

cdt

Je vais demander à l'autrice la police qu'elle a utilisée.
Prévenir un modérateur
Répondre au sujet
Aller à