Ancho automático de imagen en CSS para todos los navegadores?

Question

tengo mi etiqueta img define con un poco de CSS:

img 
{ 
    width: auto !important; 
    height: auto !important; 
    max-width: 100%; 
} 

Funciona muy bien en algunos de los navegadores móviles que he probado, así como Google Chrome en una computadora de escritorio. Sin embargo, no parece funcionar en IE o Firefox. Con eso, quiero decir, a medida que cambias el tamaño de la ventana. Eche un vistazo al sitio de una zona de pruebas en el que estoy trabajando: http://terraninstitute.com. Tengo la imagen en la página de inicio intencionalmente configurada para ser una imagen enorme. También vaya a la información (menú principal) y luego a los recién llegados (menú lateral) y observe la imagen del mapa en la parte inferior. En mi Droid (y algunos otros dispositivos que puedo tener en mis manos), así como en Google Chrome, esto se ve bastante bien. En IE y Firefox, no tanto.

¿Echo de menos algo? ¿Definiciones de estilo conflictivas? No los encuentro todavía si es así.

TIA

Answer 1

Estás declarando el ancho de sus imágenes múltiples veces en el documento innecesariamente y declarando un máximo ancho de la manera incorrecta Max-width se supone que define un tamaño/límite máximo para sus imágenes (600px, por ejemplo), si declara ancho máximo: 100% junto con ancho: 100%, realmente no está haciendo nada con eso declaración ya que las imágenes se expandirán al 100% tal como están.

Retire las declaraciones de su anchura CSS en las siguientes líneas:

la línea 116: borrar la declaración img todos juntos, no es necesaria.

línea 365: quitar el atributo max-width:100% y height:auto;, ya que no se necesitan (y si se puede eliminar la declaración todos juntos, como se puede declarar que en otros lugares)

línea 121: Ahora sólo se adhieren con éste y justo añadir el siguiente:

img { 
    height: auto; 
    width:100%; 
} 

Answer 2

No utilice !important

Haga su CSS más speficic:

body img { 
    width: auto; 
    height: auto; 
    max-width: 100%; 
} 

Answer 3

en línea de la línea style.css 116, 212 y en la línea 365. inuit.css eliminar todos aquellos elementos.

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

Eso es todo lo que necesita.

solución

Answer 4

Bootstrap para las imágenes que responden:

img { 
    /* Responsive images (ensure images don't scale beyond their parents) */ 

    /* Part 1: Set a maxium relative to the parent */ 
    max-width: 100%; 

    /* IE7-8 need help adjusting responsive images */ 
    width: auto\9; 

    /* Part 2: Scale the height according to the width, otherwise you get stretching */ 
    height: auto; 

    vertical-align: middle; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
}