Superposition d'images

Bonjour à tous,
Et bien, voilà, je suis en train de créé une page d'accueil et je voudrais superposer deux images en décalées. Jusque là pas de problème. Le seul hic est que je descend de résolution mais deux images qui une widht en vw s'éloigne l'une de l'autre et c'est pas beau.

Merci pour votre aide.

Bruno.
body {background-color: rgb(240, 240, 240);}

.container {position: relative;}
.img01 {width: 100vw;max-width: 40rem; position: fixed;}
.img02 {width: 40vw; max-width: 20rem; position: fixed; top:10rem;}

Modifié par brusospel (15 Apr 2024 - 14:20)

Bonjour.

Vu comme ça, rapidement, je me demande pourquoi vous prévoyez une max-width.

Y-a-t-il un intérêt ?
Et surtout, pourquoi prévoir une max width en rem alors que les width sont en vw ?

Les rem, em et vw ont des référentiels différents, alors il y a peut-être quelque chose qui change dans la structure en réduisant la largeur d'écran.

Le mieux serait de tout avoir en vw (en supprimant d'ailleurs la max-width). Avec le vw, tout s'accorde de toute façon en pourcentage de la largeur de l'écran (puisque 1vw = 1% de la largeur de l'écran actuel).

Ou alors, les rem sont là pour correspondre à du texte qui est défini en rem ?

Ou si besoin, pourquoi ne pas définir le max-width en pixels ? (ça évitera que les images deviennent trop grandes, mais ça ne bloquera pas la largeur pour les écrans étroits, car ils auront moins de pixels en théorie).
Modifié par AlexInSi (20 Apr 2024 - 12:24)