CSS images galères

Hello la zone.

Je travaille sur un petit site internet pour une cliente artiste.

Je travaille sur sa page d accueil.
Je suis pas dev expert, j’ai toujours tout fait à la sauce.

Bon la je bloque sur une c**nerie qui me paraît pas trop compliqué, mais je comprends pas comment procéder.

Voici le topo :

Une page avec un fond type puzzle , avec des cases vides, mais pas toutes évidemment.

Les cases vides sont remplies par d’autres images spécifiques qui permettent en cliquant dessus d’accéder à des pages du site…

Donc l’idée : limage globale est dans une div.
Les « pièces » du puzzle sont des images positionnées en absolute / %top / %left.

Du coup quand la page est affichée entièrement, c’est nickel.

Mais lorsque je rétrécie la page - et le problème est la :

  • l’image du fond rétrécie aussi
  • mais les « pièces » du puzzle :confused:

Comment faire pour mes images dispersées dans ma page se redimensionnement en même temps que ma page ?!?

Exemple la https://web.devloprog.org/mono/anais_lapel/new/test.html

La pièce blanche est positionnée en haut à gauche et elle n’est pas redimensionnée

Si qqun a une réponse, je le remercie par avance :sweat_smile:

En fait la div parente de ton image de fond, il faut qu’elle fasse exactement la taille de ton image de fond et que tu la mettes en position: relative. Et ensuite dans cette zone tu mets toutes tes images. Au final tu devrais avoir ça :

body {
margin: 0; // pour virer tes marges qui te gênent pour ton calcul du 100%
}

.parent { // div parente de ton image
position: relative;
display: inline-block;
}

.main-image { // l’image de fond
max-height: 100vh;
max-width: 100vw;
}

Tu peux virer le reste, à part tes tailles sur les images positionnées (j’ai verif toutes tes images elles sont ok).
Et ensuite il faut juste que tu rajoutes une width & height sur chacune de tes images pour qu’elle ne continuent pas de grossir si jamais ton zoom est limité par ton viewport. Donc pareil en pourcentage comme la position.

1 « J'aime »

Je vais tester ça !
Merci en effet je n’avais pas tenté avec les vh et vw .
A voir ce que ça donne avec plusieurs pièces du puzzle :slight_smile:

Merci !

Normalement j’ai testé avec toutes celles que tu avais commenté, et ça passe bien :wink:

Hello !
je teste … mais ça ne semble fonctionner ( mon image de puzzle reste à la même taille alors que l’image de fond réduit elle …
y’a un truc que j’ai du louer quelque part …

Edit : en effet je n’avais pas mis la taille en % de l’image du puzzle :slight_smile:
super merci !

1 « J'aime »

Alors attention parce que tout ça c’est rigolo mais ça ressemblera à quoi sur smartphone ? Parce que le mobile c’est super important pour plein de gens et surtout pour Google (qui référence tout simplement plus les sites non mobile 1st.)

2 « J'aime »

Yep @Cafeine :+1: mais mon client a clairement dit : osef du mobile :calling:
Donc bon, je suis pas d’accord, mais c’est le client :sweat_smile:

1 « J'aime »

De toute façon internet ca n’a aucun avenir :ninja:
Drôle de client.
Pas grave tu lui factureras la v2 smartphone compatible dans 6 mois quand elle aura compris.

1 « J'aime »

Ha oui ?Je ne savais pas. Mais ça semble logique si l’immense majorité des gens utilisent dorénavant que leur smartphone.

1 « J'aime »

Yep ça fait longtemps en plus. Pour mes clients je fais super gaffe depuis des années.