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

Résolu/Fermé

fourmiagile Messages postés 19 Date d'inscription dimanche 6 juillet 2014 Statut Membre Dernière intervention 16 février 2017 - 3 déc. 2015 à 17:57
fourmiagile Messages postés 19 Date d'inscription dimanche 6 juillet 2014 Statut Membre Dernière intervention 16 février 2017 - 5 déc. 2015 à 10:22

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:

Comment adapter les images d'une page au zoom de l'écran?
Supprimer une page word - Guide
Double ecran - Guide
Comment traduire une page - Guide
Capture d'écran samsung - Guide
Ecran noir pc - Guide

1 réponse

Réponse 1 / 1

patricia@84 Messages postés 106 Date d'inscription vendredi 27 novembre 2015 Statut Membre Dernière intervention 24 septembre 2023 9
4 déc. 2015 à 13:44

Bonjour,

Pouvez-vous préciser les css que vous avez mis pour le traitement de vos images ?

fourmiagile Messages postés 19 Date d'inscription dimanche 6 juillet 2014 Statut Membre Dernière intervention 16 février 2017
4 déc. 2015 à 17:18

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.

patricia@84 Messages postés 106 Date d'inscription vendredi 27 novembre 2015 Statut Membre Dernière intervention 24 septembre 2023 9 > fourmiagile Messages postés 19 Date d'inscription dimanche 6 juillet 2014 Statut Membre Dernière intervention 16 février 2017
4 déc. 2015 à 18:21

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 ?

fourmiagile Messages postés 19 Date d'inscription dimanche 6 juillet 2014 Statut Membre Dernière intervention 16 février 2017 > patricia@84 Messages postés 106 Date d'inscription vendredi 27 novembre 2015 Statut Membre Dernière intervention 24 septembre 2023
4 déc. 2015 à 18:36

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!

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,

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.

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

[PIX] Commencer chaque poème sur une nouvelle page

Discussions similaires

Newsletters