Comment redimensionner automatiquement une image pour un site mobile?

J'ai essayé une recherche de Google sur ceci et ne peux toujours pas comprendre comment redimensionner une image par sa largeur pour divers appareils mobiles. Voici ma tentative:Comment redimensionner automatiquement une image pour un site mobile?

CSS:

img.test { 
    width: 100%; 
    height: auto; 
}

HTML:

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
     <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> 
     <link rel="stylesheet" href="../includes/style.css"> 
    </head> 
    <img class="test" src="../includes/foo.jpg">

Mais l'image est toujours en cours de chargement avec son échelle d'origine. Je suis un css et html newb donc toute aide serait géniale!

Editer:

Merci pour les réponses. Voici une version révisée qui fonctionne maintenant.

HTML:

<html> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
     <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"> 
     <link rel="stylesheet" href="../includes/style.css"> 
    </head> 
    <body width = "device-width"> 
     <img class="test" src="../includes/buoy_map.jpg"> 
    </body>

Source

2011-10-05 Richard

Avez-vous donné une largeur à l'un des éléments parents de l'image? – Gerben

Votre balise 'img' devrait être dans' body'. Vous n'avez pas _have_ d'une balise body, alors ajoutez-en une :-) – Bojangles

Votre css avec n'a aucun effet car l'élément extérieur n'a pas de largeur définie (et le corps manque également).

Une approche différente consiste à fournir des images déjà mises à l'échelle. http://www.sencha.com/products/io/ par exemple délivre l'image déjà réduite en fonction de l'appareil de visualisation.

Source

2011-10-05 13:40:52 konsolenfreddy

img { 
    max-width: 100%; 
}

Si définir l'image pour prendre 100% de celui-ci est l'élément contenant.

Source

2011-10-05 13:37:56

Ceci est utile, dans certaines circonstances, mais il ignorera le rapport d'aspect de votre image, en l'inclinant potentiellement. – jamesnotjim

dans ce cas, il devrait inclure height: auto; – Geomorillo

Cela devrait être la réponse acceptée – niry

img 
{ 
    max-width: 100%; 
    min-width: 300px; 
    height: auto; 
}

Source

2013-08-28 19:22:49 squarcle

Pour moi, cela a fonctionné mieux pour ajouter ceci dans l'image css: max-width:100%; et NON spécifier la largeur de l'image et la hauteur des paramètres html. Cela a ajusté la largeur pour s'adapter à l'écran de l'appareil tout en ajustant la hauteur automatiquement. Sinon, la hauteur pourrait être déformée.

Source

2014-10-13 16:32:10 adrianTNT

si vous utilisez bootstrap 3, il suffit d'ajouter img sensible classe dans votre balise img

<img class="img-responsive" src="...">

si vous utilisez bootstrap 4, ajoutez classe img fluide dans votre balise img

<img class="img-fluid" src="...">

qui fait le personnel: max-width: 100%, hauteur: automatique, un nd display: block to the image

Source

2017-05-04 09:18:47

Je ne sais pas pourquoi quelqu'un a voté en bas de cette réponse. Cela fonctionne bien pour moi. L'image se serre bien dans le navigateur mobile. Je vous remercie. –

hauteur: auto; a fait l'affaire pour moi. Maintenant, mes images sont redimensionnées en fonction de la résolution de l'appareil mobile. Je vous remercie –

Comment redimensionner automatiquement une image pour un site mobile?

Répondre

Questions connexes