Discussion :

[sarahjad]

Bonjour,

Je développe un site web résponsif et en haut de la page j'ai mis un slideshow qui défile des images. Mon problème c'est que qu'on je met l’écran petite, on voit bien toute la photo avec une meilleur qualité, mais qu'on j’agrandis l'image, elle s’attire horizontalement elle et elle se coupe d'en bas(on voit plut la totalité de l'image) et elle perd sa qualité aussi.

Si quelqu’un peut m'aider s'il vous plait !!

merci par avance

[Manequin]

Bonjour, ça veut dire que ton site n'est pas Responsif, c'est à dire qu'il ne s'adapte pas aux dimensions des différents écrans.

Cordialement.

[sarahjad]

non tout ce que j'ai sur le site s'adapte aux différents écran a part les images du slide

j'ai mis ça dans le head

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

[Manequin]

Essaie de définir tes images en %.

Cordialement.

[Manequin]

Code CSS :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.images {
height:auto ;
width:100 %;
}

Cordialement.

[sarahjad]

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
header.masthead3
	{
        text-align:center;color:#fff;
	background-image:url(../img/contact.jpg);
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:center center;
       -webkit-background-size:cover;
	-moz-background-size:cover;
	-o-background-size:cover;
	background-size:cover
 
       }

[Invité]

Bonjour,

Donc, tu as une image en background, en "cover" : elle couvre toute la surface.

cover
Un mot-clé dont le comportement est opposé à celui de contain.
L'image est redimensionnée pour être aussi grande que possible et pour conserver ses proportions.
L'image couvre toute la largeur ou la hauteur du conteneur et les parties qui dépassent sont rognées si les proportions du conteneur sont différentes (il n'y aucun espace libre sur lequel on verrait la couleur d'arrière-plan).

• Peux-tu nous donner ses dimensions (en pixels) ?

Si sa largeur est inférieure à la largeur d'affichage, c'est normal qu'elle perde en qualité.

Quant à la hauteur du bandeau, elle ne dépend pas de l'image, mais été fixée dans le css.
Normal aussi qu'une partie de l'image soit masquée si elle est plus haute que le bandeau.

Sinon :

• montre (au moins !) des copies d'écran !

@Manequin
Tu n'as pas compris le problème. (mais sans code ni copie d'écran : c'est normal aussi !

[sarahjad]

La largeur de l'image est 1263px

[Invité]

Donc, c'est ce que j'ai dit.

Si tu veux qu'elle s'affiche sur toute la largeur d'un écran 1920px, sans perte de qualité, il faut que l'image fasse... 1920px !

[sarahjad]

sa largeur = 1263px et hauteur=641px
du coup elle est très large?

[Invité]

Écoute : on n'est pas des magiciens.

Tu ne montres NI code (nécessaire et suffisant), NI copies d'écran, NI lien vers le site...

On ne sait pas lire dans tes pensées.

[sarahjad]

OK OK!

le CSS:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
header.masthead
	{text-align:center;color:#fff;
	background-image:url(../img/enedis-bg.jpg);
	background-repeat:no-repeat;
	background-attachment:scroll;
	background-position:center center;
	-webkit-background-size:100% 100%;
	-moz-background-size:100% 100%;
	-o-background-size:100% 100%;
	background-size:100% 100%
	}
 header.masthead .intro-text
	{padding-top:150px;padding-bottom:100px}
 header.masthead .intro-text .intro-lead-in
	{font-size:22px;line-height:22px;margin-bottom:25px;font-family:Calibri}
 header.masthead .intro-text .intro-heading
	{font-size:50px;font-weight:700;line-height:50px;margin-bottom:25px;font-family:Calibri}@media (min-width:768px)
 {
 header.masthead .intro-text
	{padding-top:300px;padding-bottom:200px}
 header.masthead .intro-text .intro-lead-in
	{font-size:40px;line-height:40px;margin-bottom:10px;font-family:Calibri}
 header.masthead .intro-text .intro-heading
	{font-size:75px;font-weight:700;line-height:75px;margin-bottom:50px;font-family:Calibri}}.service-heading{margin:15px 0;text-transform:none}

et mon html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<header class="masthead1 masthead">
      <div class="container" id="main-slider">
        <div class="intro-text">          
		<div class="intro-lead-in">Bienvenue</div>
          <a class="btn btn-primary btn-xl text-uppercase js-scroll-trigger" href="#actualite">Les actualités </a></br></br>
        </div>
      </div>
    </header>

[Invité]

1- Ce n'est pas le même code !

Avec background-size:100% 100%, l'image va se déformer !
Il faut remettre background-size:cover;.


2- Il est possible d'utiliser PLUSIEURS images, de tailles différentes, en fonction de la largeur d'affichage (et des break-points : 768px,...)

Ex. : on n'affiche pas une image de 1200px sur un écran de 640px. On ADAPTE la taille de l'image.

[sarahjad]

j'avais mis avant background-size:cover; et j'ai obtenue le même résultat