Probé una búsqueda en Google sobre esto y aún no puedo encontrar la manera de cambiar el tamaño de una imagen por su ancho para varios dispositivos móviles. Aquí está mi intento:¿Cómo cambio automáticamente el tamaño de una imagen para un sitio móvil?
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">
Pero la imagen fija está siendo cargado con su escala inicial. ¡Soy css y html newb así que cualquier ayuda sería genial!
Editar:
Gracias por las respuestas. Aquí hay una versión revisada que ahora funciona.
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>
¿Le ha dado un ancho a alguno de los elementos principales de la imagen? – Gerben
Su etiqueta 'img' debe estar dentro de' body'. En realidad, no tiene una etiqueta corporal, así que agregue una :-) – Bojangles