Adapter une image en fonction des écrans

céline -
thibautB Messages postés 140 Date d'inscription Statut Membre Dernière intervention - 16 oct. 2016 à 01:47

Bonjour,

J'ai regardé pas mal de topic mais je ne trouve pas de solution à mon "problème".
J'ai une page web avec simplement 1 image (format vertical). Si je ne mets pas de "width" et "height" l'image est trop grande dans le navigateur et apparait de manière optimale sur smartphone.
SI je mets les attributs "width" et "height", l'image apparait nickel dans les navigateurs mais trop petite sur les smartphone.
J'ai testé les media querries mais je n'y arrive pas (à mon avis je fais ça mal :/ )

Qqun pour m'aider ?

Merci !

Afficher la suite

A voir également:

Adapter une image en fonction des écrans
Fonction si et - Guide
Image iso - Guide
Légender une image - Guide
2 écrans - Guide
Transformer une image en icone - Guide

1 réponse

Réponse 1 / 1

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Salut,

Tu peux essayer d'appliquer une largeur en pourcentage afin de celle-ci s'adapte à la largeur de son parent (la largeur de la page).

Sinon tu peux effectivement définir une taille pour les différentes largeur d'écran via les medias queries, il faudrait voir ce que tu as essayer pour savoir si as fait une erreur.

Un exemple : https://jsfiddle.net/1k8p3wpp/

Bonne journée,

céline

Bonjour,

J'avais essayer avec les media querries suivantes :
la balise "content" est une balise class que j'ai mis sur le div qui contient l'image

@media screen and (max-width: 1024px) {
.content {
display: block;
height: auto;
min-height: auto;
width: 67%;
}

@media screen and (max-width: 640px) {
.content {
display: block;
height: auto;
min-height: auto;
width: 100%;
}

@media screen and (max-width: 960px) {
.content {
width: 79.1015625%;
}

@media screen and (max-width: 420px) {
.img {
width : 200%;
}

Merci d'avance,

Céline

Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention 527

Il semble que tu as oublié l'accolade fermante des medias queries, par exemple :

@media screen and (max-width: 960px) {
    .content {
        width: 79.1015625%;
    }
} /* <- ne pas oublier de fermer @media screen and (max-width: 960px) */

@media screen and (max-width: 420px) {
    .img {
        width : 200%;
     }
} /* <- ne pas oublier de fermer @media screen and (max-width: 420px) */

céline > Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention

Merci ! J'ai corrigé mais cela ne change pas :(
ci-dessous mon code au cas où il y aurait qqch qui cloche :

<body style="background-color:#fff;">
<div id="content" class="content" align="center">
    	<map name="indexfriterie"> 
		  <area shape="rect" coords="38,674,738,907" href="http://www.friteriedelabarriere.be/indexfriterie.html" alt="Accueil" />
          <area shape="rect" coords="37,233,738,471" href="http://www.friteriedelabarriere.be/indexlivraison.html" alt="Accueil" />
	  </map>
   	  <img usemap="#indexfriterie" class="image" src="images/index.jpg" align="center" alt="" width="760" height="1103" />
</div>
</body>

Merci d'avance :)

thibautB Messages postés 140 Date d'inscription Statut Membre Dernière intervention 1

le .content il faut que tu le mette sur le même niveau que le media, en le mettant avant bien sur donc ça donne(idem pour img) :


.content @media screen and (max-width: 960px)
 {

        width: 79.1015625%;
    
  } /* <- ne pas oublier de fermer @media screen and (max-width: 960px) */

.img  @media screen and (max-width: 420px) 
 {
      width : 200%;
 }

Discussions similaires

PIX

Remplir une cellule (texte) en fonction d'une autre (texte).

Dechiffrer une image caché

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

Votre réponse

Discussions similaires