¿Cómo puedo cambiar el tamaño de una imagen dinámicamente con CSS a medida que cambia el ancho / alto del navegador?

Me pregunto cómo podría cambiar el tamaño de una imagen junto con la ventana del navegador, esto es lo que he hecho hasta ahora (o descargar todo el sitio en un ZIP ).

Esto funciona bien en Firefox, pero tiene problemas en Chrome: la imagen no siempre cambia de tamaño, de alguna manera depende del tamaño de la ventana cuando se cargó la página.

Esto también funciona bien en Safari, pero a veces la imagen se carga con su ancho / alto mínimo. Tal vez esto se deba al tamaño de la imagen, no estoy seguro. (Si se carga bien, intente actualizar varias veces para ver el error).

¿Alguna idea sobre cómo podría hacer esto más a prueba de balas? (Si se necesita JavaScript, también puedo vivir con eso, pero es preferible CSS).

Esto se puede hacer con CSS puro y ni siquiera requiere consultas de medios.

Para hacer que las imágenes sean flexibles, simplemente agregue max-width:100%y height:auto. Imagen max-width:100%y height:autofunciona en IE7, pero no en IE8 (sí, otro error extraño de IE). Para solucionar este problema, debe agregar width:auto\9para IE8.

fuente: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

Y si desea aplicar un ancho máximo fijo de la imagen, simplemente colóquelo dentro de un contenedor, por ejemplo:

<div style="max-width:500px;">
    <img src="..." />
</div>

Ejemplo de JSFiddle aquí . No se requiere JavaScript. Funciona en las últimas versiones de Chrome, Firefox e IE (que es todo lo que he probado).

2018 y solución posterior:

El uso de unidades relativas a la ventana gráfica debería facilitarle la vida, dado que tenemos la imagen de un gato:

Ahora queremos este gato dentro de nuestro código, respetando las relaciones de aspecto:

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

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Hasta ahora no es realmente interesante, pero ¿y si quisiéramos cambiar el ancho de los gatos para que sea el máximo del 50% de la ventana gráfica?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

La misma imagen, pero ahora restringida a un ancho máximo de 50vw vw (= ancho de la ventana gráfica ) significa que la imagen tendrá el ancho X de la ventana gráfica, según el dígito proporcionado. Esto también funciona para la altura:

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

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Esto restringe la altura de la imagen a un máximo del 20% de la ventana gráfica.

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

En IE, el onresizeevento se activa con cada cambio de píxel (ancho o alto), por lo que podría haber problemas de rendimiento. Retrasar el cambio de tamaño de la imagen por unos milisegundos usando window.setTimeout () de JavaScript.

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

Establezca la propiedad de cambio de tamaño en ambos. Entonces puedes cambiar el ancho y el alto de esta manera:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

¿Estás usando jQuery?

Debido a que hice una búsqueda rápida en los conectores de jQuery y parecen tener algún complemento para hacer esto, verifique este, debería funcionar:

http://plugins.jquery.com/project/jquery-afterresize

EDITAR:

Esta es la solución CSS, solo agrego un estilo = "ancho: 100%" , y funciona para mí al menos en Chrome y Safari. No tengo ie, así que solo prueba allí y avísame, aquí está el código:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

Inicialmente, estaba usando el siguiente html / css:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

Luego agregué class="img"a algo <div> así:

<div class="img">
  <img src="..." />
</div>

Y todo empezó a funcionar bien.

Puede usar la scalepropiedad CSS3 para cambiar el tamaño de la imagen con css:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Lecturas adicionales :

• Transformaciones CSS3 2D
• Transiciones, transformaciones y animaciones del efecto de desplazamiento de CSS3

Solo usa este código. Lo que la mayoría está falsificando es especificar el ancho máximo como el ancho máximo de la imagen

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

Consulte esta demostración http://shorturl.at/nBKVY

Tratar

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Solo funciona con bloque de visualización y bloque en línea, esto no tiene ningún efecto en los elementos flexibles, ya que acabo de pasar mucho tiempo tratando de averiguarlo.