Redimentionne image sur un smartphone

Question

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

Pitet · Answer

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,

Redimentionne image sur un smartphone

1 réponse

Discussions similaires

Newsletters