web-dev-qa-db-fra.com

Comment redimensionner automatiquement une image pour un site mobile?

J'ai essayé une recherche Google à ce sujet et je n'arrive toujours pas à comprendre comment redimensionner une image par sa largeur pour divers appareils mobiles. Voici ma tentative:

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 sa mise à l'échelle d'origine. Je suis un newb css et html donc toute aide serait géniale!

Modifier:

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>
htmlcssimage
22
Richard

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

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 du périphérique de visualisation.

3
konsolenfreddy
img {
  max-width: 100%;
}

Devrait définir l'image pour occuper 100% de son élément contenant.

43
Doozer Blake
img
{
    max-width: 100%;
    min-width: 300px;
    height: auto;
}
17
squarcle

si vous utilisez bootstrap, ajoutez simplement la classe img-responsive dans votre balise img

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

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

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

qui fait le personnel: largeur max: 100%, hauteur: auto, et affichage: bloc à l'image

7
Lingjing France

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

2
adrianTNT