2011-10-05 23 views
14

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> 
+1

¿Le ha dado un ancho a alguno de los elementos principales de la imagen? – Gerben

+1

Su etiqueta 'img' debe estar dentro de' body'. En realidad, no tiene una etiqueta corporal, así que agregue una :-) – Bojangles

Respuesta

2

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.

33
img { 
    max-width: 100%; 
} 

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

+0

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

+4

en ese caso debe incluir altura: auto; – Geomorillo

+0

Esta debería ser la respuesta aceptada – niry

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

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.

2

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

+0

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. –

+0

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 –

Cuestiones relacionadas