Redimentionne image sur un smartphone

Fermé
Dawak - 18 nov. 2017 à 16:23
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 - 20 nov. 2017 à 10:11
Bonjour,
Je viens vers vous car j'ai un petit problème;
Je n'arrive pas a faire que mon image soit redimensionné sur les téléphones, elle déborde de l'écran et cela est pas beau a voir.
J'ai essayé de me renseigne mais je n'arrive pas à toute comprendre. Voila ce que j'ai fait :
@media(max-width:320px){
.concours {
background-image: url(img/cms/concours.PNG)}
#main .concours{height:270px;}
#main .concours{height:120px;}
}


Je vous remercie pour votre attention

1 réponse

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 545
Modifié le 20 nov. 2017 à 10:12
Salut,

On recommande en général de commencer par définir le style pour la version mobile puis d'utiliser les médias queries pour définir le styles des résolutions plus grande (via min-width du coup).

Par exemple :
/* Par défaut (en mobile), on affiche l'image sur 120px */
#main .concours {
  background-image: url(img/cms/concours.PNG);
  height: 120px;
}

/* Pour les résolutions au dessus de 768px, on affiche l'image sur 270px */
@media(min-width: 768px) {
  #main .concours {
    height: 270px;
  }
}


Bonne journée,
0