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

Me pregunto cómo podría hacer que una imagen cambie de tamaño junto con la ventana del navegador, esto es lo que he hecho hasta ahora (o descargue 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 es causado por el 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 . max-width:100% imagen max-width:100% y height:auto funciona en IE7, pero no en IE8 (sí, otro error raro de IE). Para solucionar esto, necesita agregar width:auto\9 para 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 imponer un ancho máximo fijo de la imagen, simplemente colóquelo dentro de un contenedor, por ejemplo:

 

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

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

En IE onresize event se dispara en cada cambio de píxel (ancho o alto) por lo que podría haber un problema de rendimiento. Retraso en el cambio de tamaño de la imagen durante unos pocos milisegundos mediante el uso de javascript’s window.setTimeout ().

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

Establezca la propiedad de cambio de tamaño a ambos. Luego puede cambiar el ancho y la altura 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 complementos de jQuery y parece que tienen algún complemento para hacer esto, verifique esto, debería funcionar:

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

EDITAR:

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

   

Solución 2018:

Usar unidades relativas a ventanas gráficas debería facilitarle la vida, dado que tenemos la imagen de un gato:

gato

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

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

Puede usar scale propiedad de scale 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; } 

Lectura adicional :

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

Inicialmente, estaba usando el siguiente html / css:

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

Luego agregué class="img" al

esta manera:

 

Y todo comenzó a funcionar bien.