¿Cómo cambio automáticamente el tamaño de una imagen para un sitio móvil?

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>

Fuente

2011-10-05 Richard

¿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

Su css con no tiene ningún efecto ya que el elemento exterior no tiene un ancho definido (y también falta el cuerpo).

Un enfoque diferente es entregar imágenes ya escaladas. http://www.sencha.com/products/io/ por ejemplo entrega la imagen ya reducida según el dispositivo de visualización.

Fuente

2011-10-05 13:40:52 konsolenfreddy

img { 
    max-width: 100%; 
}

debe establecer la imagen para tomar hasta 100% de su elemento contenedor.

Fuente

2011-10-05 13:37:56

Esto es útil, en ciertas circunstancias, pero ignorará la relación de aspecto de su imagen, lo que podría distorsionarla. – jamesnotjim

en ese caso debe incluir altura: auto; – Geomorillo

Esta debería ser la respuesta aceptada – niry

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

Fuente

2013-08-28 19:22:49 squarcle

Para mí, funcionó mejor para agregar esto en la imagen css: max-width:100%; y no especifica ancho de la imagen y la altura de los parámetros del HTML. Ajustó el ancho para que quepa en la pantalla del dispositivo mientras se ajusta la altura automáticamente. De lo contrario, la altura podría distorsionarse.

Fuente

2014-10-13 16:32:10 adrianTNT

si utiliza de arranque 3, sólo tiene que añadir img sensible clase en su etiqueta img

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

si utiliza de arranque 4, añadir img-líquido de clase en su etiqueta img

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

que hace el personal: max-width: 100%, altura: auto, una nd pantalla: bloquear a la imagen

Fuente

2017-05-04 09:18:47

No sé por qué alguien votó por esta respuesta. Esto funciona bien para mi. La imagen se comprime bien en el navegador móvil. Gracias. –

altura: auto; hizo el truco para mí Ahora mis imágenes cambian de tamaño según la resolución del dispositivo móvil. Gracias –

¿Cómo cambio automáticamente el tamaño de una imagen para un sitio móvil?

Respuesta

Cuestiones relacionadas