Gli IMG reattivi mantengono le dimensioni

Question

Ho un sito Web reattivo, in cui ridimensiono tutte le mie immagini nelle visualizzazioni della query multimediale CSS3 corrispondente.Mi chiedo se esiste un modo più semplice per affermare che voglio che tutte le mie immagini vengano ridimensionate mantenendo le dimensioni originali dichiarate invece di ridimensionarle manualmente ciascuna di conseguenza con max-height, width, ecc. Qualche suggerimento?

Ad es. sotto.

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

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

}

Answer 1

Credo che dichiarare img {max-width: 100%} dovrebbe fare il trucco.L'immagine verrà ridimensionata e manterrà le sue dimensioni.

Answer 2

Usa background-size: contiene;o background-size: copertina;come appropriato.

Answer 3

Questo è ciò che è necessario per ciò che viene comunemente definito immagini fluide :

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

La prima dichiarazione si assicura che tutte le immagini non superino la larghezza del loro elemento contenitore.La dichiarazione automatica per l'altezza garantisce che tutte le immagini mantengano le loro proporzioni quando vengono ridimensionate anche quando hanno attributi di dimensione nell'elemento img.

In questo modo potresti semplicemente dichiarare la larghezza o la larghezza massima sull'elemento contenitore del img senza doversi preoccupare di dimensioni / proporzioni.

Answer 4

usa l'elemento immagine http://caniuse.com/picture

manuale 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>