Comment redimensionner automatiquement une image pour un site mobile?
J'ai essayé une recherche Google sur ce point et ne peut toujours pas comprendre comment redimensionner une image par sa largeur pour les différents périphériques 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 son original de mise à l'échelle. Je suis un css et html newb de sorte que toute aide serait super!
Edit:
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 d'informationauteur Richard
Vous devez vous connecter pour publier un commentaire.
Votre css avec n'a aucun effet tant que l'élément extérieur n'a pas une largeur définie (et le corps est manquant).
Une autre approche est de fournir déjà mis à l'échelle des images. http://www.sencha.com/products/io/ par exemple, offre l'image déjà revus à la baisse en fonction de l'appareil de visualisation.
Doit régler l'image à prendre jusqu'à 100% de l'élément conteneur.
si vous utilisez bootstrap 3 , il suffit d'ajouter img-responsive classe dans votre balise img
si vous utilisez bootstrap 4ajouter img-liquide classe dans votre balise img
qui ne le personnel:
max-width: 100%, hauteur: auto et display:block à l'image
Pour moi, cela a fonctionné mieux pour ajouter cette image css:
max-width:100%;
et de ne PAS spécifier la largeur de l'image et de la hauteur dans les paramètres html. Cette ajusté à la largeur pour s'adapter à l'écran tout en ajustant automatiquement la hauteur. Sinon, la hauteur peut être déformée.