Comment changer la taille de l'image en fonction de la taille de l'écran?

Question

Je veux qu'une bannière soit affichée sur 50% de la largeur d'un grand écran (bureau) et 100% de la largeur sur un petit écran (iphone).

Au moment où l'image est affichée à plus de 50% de l'écran pour chaque appareil:

.advert-img { 
    width: 50%; 
    height:auto 
} 

Comment puis-je faire varier la largeur en fonction de la taille de l'écran?

Est-ce possible avec tous les navigateurs? c'est-à-dire le vieux navigateur blackberry

Answer 1

Pour ce faire, vous avez besoin de media queries. Dans votre cas, le css ressemblerait à ceci:

.advert-img { 
    width: 50% 
    height: auto; 
} 
@media screen and (max-width: 480px) { 
    .advert-img { 
    width: 100%; 
    } 
} 

Vous pouvez remplacer 480px avec tout ce qui fonctionne le mieux pour votre contenu en termes d'un mobile breakpoint

Answer 2

Vous pouvez utiliser les CSS médias Requêtes pour différencier la largeur l'appareil .. Supposons que vous voulez différencier un mobile avec 480 largeur et un ordinateur de bureau avec 1024 largeur, vous pouvez faire quelque chose comme le code ci-dessous:

.advert-img { 
    width: 50%; 
    height:auto 
} 
@media only screen and (max-device-width: 480px) { 
    width: 100%; 
} 

pour plus d'informations consultez ce link

Answer 3

Mettre cette requête multimédia dans votre CSS:

@media (max-width: 1024) { 
    /* Code here works for mobiles and tablets. */ 
    .advert-img { width: 100%; } 
} 

Cela fonctionne sur tous les navigateurs concernés. Il fonctionnera sur Blackberry 4.7.1 et au-delà. Vérifiez cela pour Blackberry: http://docs.blackberry.com/en/developers/deliverables/11844/BB_Browser_content_support_by_version_438586_11.jsp.

Answer 4

Je pense que ce que vous voulez atteindre peut être fait à l'aide des médias Requêtes pour CSS3 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/