Responsive IMGs behalten ihre Dimensionen bei

Question

Ich habe eine reaktionsfähige Website, auf der ich die Größe aller meiner Bilder in den Ansichtsfenstern der entsprechenden CSS3-Medienabfrage ändere.Ich frage mich, ob es eine einfachere Möglichkeit gibt, anzugeben, dass ich die Größe aller meiner Bilder unter Beibehaltung der ursprünglich angegebenen Abmessungen ändern möchte, anstatt sie manuell mit max-height, width usw. entsprechend zu ändern. Irgendwelche Vorschläge?

EG unten.

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

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

}

Answer 1

Ich glaube, dass das Deklarieren von img {max-width: 100%} den Trick machen sollte.Das Bild wird verkleinert und behält seine Abmessungen bei.

Answer 2

Hintergrundgröße verwenden: enthalten;oder Hintergrundgröße: Abdeckung;nach Bedarf.

Answer 3

Dies ist erforderlich für das, was allgemein als flüssige Bilder bezeichnet wird:

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

Die erste Deklaration stellt sicher, dass alle Bilder die Breite ihres enthaltenen Elements nicht überschreiten.Die automatische Deklaration für die Höhe stellt sicher, dass alle Bilder ihre Proportionen behalten, wenn sie verkleinert werden, auch wenn sie Größenattribute im img-Element haben.

Auf diese Weise können Sie nur die Breite oder die maximale Breite des Containerelements des img deklarieren, ohne sich um Abmessungen / Proportionen kümmern zu müssen.

Answer 4

Bildelement verwenden http://caniuse.com/picture

Handbuch http://www.html5rocks.com/en/tutorials/responsiv / Bildelement /

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