Verwenden von Medienabfragen für Bilder

Question

Ich verwende eine Ansichtsfenster-Gerätebreite in meinem Code. Es funktioniert gut auf Handys für Text und Bilder. Das Problem ist, es Bilder zu sehr auf großen Bildschirmen zoomt so habe ich versucht, Medien Abfragen wie folgt zu verwenden: zum div <img>

mit einem Gehalt an

.img { 
    width:100%; 
    height:auto; 
    text-align:center; 
} 

@media screen only and (min-device-width:800px) { 
    .img { 
    width:1000px; 
    height:auto; 
    text-align:center; 
    } 
} 

Klasse .img angewandt wird, funktioniert es gut auf großen Bildschirme jetzt, aber es funktioniert nicht mehr auf dem Handy. Der Text ist immer noch in Ordnung, aber das Bild passt nicht wie zuvor an die Gerätebreite an (und wie im Meta-Ansichtsfenster). Ich habe keine Ahnung, wie ich es beheben kann.

Wenn jemand eine Idee hat,

Danke,

Answer 1

Eine weitere Option ist max-width für ein Bild zu verwenden. Wenn ein Bild gestreckt wird, sollten Sie die maximale Größe des Bildes als max.

.img { 
    max-width: 500px; 
} 

Auf diese Weise wird das Bild nur so weit ausstrecken.

Answer 2

Danke für Ihre Antworten Jungs. Wie ich erwartet hatte, kam das Problem von mir. Meine Klasse "img" wurde auf das div mit dem img angewendet.

Das Problem ist, dass auf diese Weise die Breite und maximale Breite nicht funktioniert.

Ich habe gerade die .img-Klasse in zwei Klassen aufgeteilt. das .divimg, das das text-align appy zu dem enthält, und die .img, die width-Eigenschaften enthalten, gelten für das (nicht das wie zuvor).

Jetzt funktioniert es gut. Danke für die Hilfe.