Comment adapter les images d'une page au zoom de l'écran?

Résolu
fourmiagile Messages postés 19 Statut Membre -  
fourmiagile Messages postés 19 Statut Membre -
Bonjour,

Savez vous en Html et Css comment faire pour que les images d'un site s'adaptent automatiquement à la taille de l'écran? Ou au zoom qu'on fait sur cet écran?

Par exemple si mes images et textes sont bien disposées avec un zoom 100%, tout se déplace quand je change le zoom.

Merci pour vos explications.



A voir également:

1 réponse

Réponse 1 / 1
patricia@84 Messages postés 114 Statut Membre 9
 
Bonjour,

Pouvez-vous préciser les css que vous avez mis pour le traitement de vos images ?
0
fourmiagile Messages postés 19 Statut Membre
 
Bonsoir Patricia, merci pour votre participation.
Voici mon code en Css.
(ne crie pas pour la présentation...je suis débutant!) 

body
{
	  background-color: rgb(120, 120, 120);
	  background-image: url(terre.png);
	  background-size: 100% 400px;
	  background-repeat: no-repeat;
	  width: 100%;
}
.ligne1
{font-size: 120px; color: white; text-align: center; }


.paragraphe1
{position: absolute; top: 15%; left: 4%;}
.textebombe
{position: absolute; top:30%; left:4%; font-size: 64px; color: white;}
		
.paragraphe2
{position: absolute; top:15%; left: 20%;}
.textelune
{position: absolute; top:30%; left:20%; font-size: 64px; color: white;}

.paragraphe3
{position: absolute; top:15%; left:36%;}
.texteiss
{position: absolute; top:30%; left:36%; font-size: 64px; color: white;}


Est ce qu'il faut redimensionner dans le code Html? Dans le code Css? Directement dans un logiciel de redimensionnement?
Merci pour ton aide.
0
patricia@84 Messages postés 114 Statut Membre 9 > fourmiagile Messages postés 19 Statut Membre
 
Bonsoir,

Tout d'abord deux questions :
1 - vous avez limité la hauteur du fond du body à 400 px, ce qui fait que, quelle que soit la largeur de l'écran, votre image fera toujours 400 px. Vous ne voulez pas qu'elle prenne toute la hauteur de votre fond ?
2 - quelles sont les dimensions de votre image ?
0
fourmiagile Messages postés 19 Statut Membre > patricia@84 Messages postés 114 Statut Membre
 
Bonsoir Patricia,
Cette dimension de 400px est pour l'image d'en tête. Je veux qu'elle fasse toute la largeur de la page et seulement 400 px de hauteur.

C'est la dimension des images suivantes qui me causent problème!
0
patricia@84 Messages postés 114 Statut Membre 9 > fourmiagile Messages postés 19 Statut Membre
 
400 px pour un en-tête, c'est énorme !

Je vous conseille de mettre votre image d'en-tête dans un header que vous formatez en css en prenant les réglages que vous aviez mis pour votre body et vous mettez, dans les css du body, au minimum :
- les réglages pour votre police de caractères
- la couleur (et/ou l'image de fond et non celle de votre en-tête)
- et les margin à 0 (sans détailler celles du haut, de droite, du bas et de gauche puisqu'elles sont de même valeur).

Je vous conseille, avant d'aller plus loin, d'aller acquérir un peu plus de notions en html soit sur le site que l'on appelait avant "le site du zéro" : https://openclassrooms.com/fr/courses soit sur ce site : https://xhtml.developpez.com/cours/

Cordialement,
0
fourmiagile Messages postés 19 Statut Membre > patricia@84 Messages postés 114 Statut Membre
 
J'ai déja suivi le cours de Openclassroom, mais c'est très survolé, les notions ne sont pas suffisament approfondies.
D'où mes difficultés maintenant.
Néanmoins merci.
0

Discussions similaires

PIX
plart -
jordane45 -

1 réponse