Texte qui sort de l'image lors du passage au format smartphone

V del (vdel7836)
Les bases HTML/CSS

Bonjour,

Cela fait quelques temps que je tourne en rond, je bidouille une partie de code, rien de pro, pour les puristes je suis désolé d'avance!

Quand je passe ce code en smartphone ou même en demi écran sur un ordinateur, si le texte est trop long il sort de l'image.

J'ai compris qu'il faut assigné une box dans l'image et utiliser une unité relative comme EM ou VH mais j'avance à rien.

Si quelqu'un a une piste je suis intéressé!

Le code est visible sur codepen:

https://codepen.io/vdel/pen/Rwmygpb

Ce que je veux

Que lors du passage en mode smartphone, le texte ne sorte pas de l'image

Ce que j'obtiens

Actuellement avec mon code le texte ne s'adapte pas à la taille de l'image quand on passe en affichage smartphone

1 réponse

Grafikart

Met ton image dans l'élément qui a le texte, et fait en sorte que ce soit l'image qui soit en position absolute, pas le texte. Il te suffira ensuite de donner une hauteur / largeur de 100% à ton image.

.centered img {
    position:absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}