Modifier le codage d'une image

[sunshinette]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://sunshinette.forumactif.com/

Description du problème

Bonjour,

Je viens à vous pour un petit coup de main. J'ai positionné une image à côté de ma description mais je n'arrive pas au résultat que je souhaite.

1. J'aimerais que lorsque je change l'image, si celle-ci est plus grande, qu'elle s'élargisse vers l'intérieure et non vers l'extérieure de façon à ce qu'elle se positionne sous le texte. Je pense que mon code est salement sale car je ne suis pas très douée et je tâtonne pas mal.

Merci à vous ! Normalement la catégorie est accessible aux invités et donc vous pouvez sans doute voir ce dont vous avez besoin dans l'inspecteur. En cas de besoin, je peux fournir les codes que j'ai !

[sunshinette]

UP

[MlleAlys]

Bonjour,
"lorsque je change l'image, si celle-ci est plus grande, qu'elle s'élargisse" : je n'ai pas compris ? Ou alors vous voulez dire au survol de l'image ? Comme un effet de zoom lorsqu'on survol le forum ?

[sunshinette]

Pardon, je me suis peut-être mal exprimée. Comment dire hmmm ... Si par exemple mon image fait 500x200 (je suis pas sur mon ordi donc je donne juste un exemple), elle est bien cadrée dans la zone. Mais si je prends une image plus grande par exemple, 600x200 elle va être plus longue car la taille de l'image est plus longue que la précédente. Le problème, c'est quand prenant plus de place dans la zone où elle est placée, l'image est décalée et sort de son cadre, le moyen que j'ai trouvé c'est de recadrer avec des margin mais je pense que c'est une mauvaise solution

J'espère que c'est un peu plus clair

[MlleAlys]

Ah oui d'accord je pense que je vois !
Effectivement, la marge négative n'est pas des plus intéressante ici.
Je pense que le mieux aurait peut être été d'avoir l'image en fond plutôt qu'en élément, mais puisqu'ici ce n'est pas le cas, on peut utiliser une position absolue pour positionner l'image directement par rapport à un parent.

Notre parent qui sera notre référence pour le positionnement sera .mm-lastimg : il faut pour cela le placer en position relative : Localisez le code suivant :

Code:

.mm-lastimg {
  height: 210px;
  width: 210px;
  display: flex;
}

ajoutez position: relative;

Puis, on place l'image à 0 du bord droit de ce bloc :
Localisez :

Code:

.lastimgs img {
  margin-left: -97px;
  mask-image: linear-gradient(to left, #15161bf2 28%, transparent);
  -webkit-mask-image: linear-gradient(to left, #15161bf2 28%, transparent);
}

Supprimez la marge négative inutile,
et complétez ainsi :

Code:

.lastimgs img {
  mask-image: linear-gradient(to left, #15161bf2 28%, transparent);
  -webkit-mask-image: linear-gradient(to left, #15161bf2 28%, transparent);
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

Le 100% prend également pour référence l'élément parent indiqué avec la position relative : l'image prend toute la hauteur disponible.
L'image positionnée par rapport au bord droit, si elle est plus longue que son contenant, elle dépassera par la gauche, sous le texte de la description.

Voilà, à voir si c'est bien l'effet que vous recherchez ^^

[sunshinette]

C'est parfait cela fonctionne comme je le souhaitais ! Merci beaucoup pour l'aide apportée c'est très gentil !