Los IMG receptivos mantienen dimensiones

Question

Tengo un sitio web receptivo, donde estoy cambiando todas mis imágenes en las vistas de CSS3 Media Consuly correspondientes. Me pregunto si hay una manera más fácil de indicar que quiero que todas mis imágenes cambian de tamaño manteniendo sus dimensiones originales originales en lugar de cambiar el tamaño manual de cada uno con consecuencia con max-height, width, etc. ¿Alguna sugerencia?

Por ejemplo, abajo.

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

#logoimg { max-height: 100px; max-width: 100px; }

}

Answer 1

Creo que declarar IMG {width máximo: 100%} debería hacer el truco. La imagen escalará y mantendrá sus dimensiones.

Answer 2

Use el tamaño de fondo: contener; o tamaño de fondo: cubierta; según sea apropiado.

Answer 3

Esto es lo que se necesita para lo que comúnmente se conoce como imágenes fluidas:

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

La primera declaración asegura que todas las imágenes no excedan el ancho de su elemento que contiene. La declaración automática para la altura garantiza que todas las imágenes conserven sus proporciones cuando se reducen incluso cuando tienen atributos de tamaño en el img elemento.

De esta manera, podría declarar ancho o ancho máximo en el elemento contenedor del img sin tener que preocuparse por las dimensiones/proporciones.

Answer 4

Usar elemento de imagenhttp://caniuse.com/picture

manual http://www.html5rocks.com/en/tutorials/responsive/picture-element/

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>