Heim > Web-Frontend > js-Tutorial > Wie erhalte ich die wahren Abmessungen eines Bildes in Safari und Chrome?

Wie erhalte ich die wahren Abmessungen eines Bildes in Safari und Chrome?

Susan Sarandon
Freigeben: 2024-12-01 16:49:10
Original
226 Leute haben es durchsucht

How to Get the True Dimensions of an Image in Safari and Chrome?

Ermitteln der wahren Abmessungen eines Bildes in Safari und Chrome

Beim Erstellen eines jQuery-Plugins Extrahieren der tatsächlichen Breite und Höhe eines Bildes ist entscheidend. Die Verwendung der Standardmethoden „width()“ und „height()“ führt jedoch in WebKit-Browsern wie Safari und Chrome zu Nullwerten.

Um dieses Problem zu beheben, wird stattdessen die Nutzung des „onload“-Ereignisses eines Bildes empfohlen Auszeiten. Bei dieser Technik wird eine speicherinterne Kopie des Bildes erstellt, um CSS-Interferenzen zu vermeiden.

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });
Nach dem Login kopieren

Alternativ können auch die HTML5-Attribute „naturalHeight“ und „naturalWidth“ verwendet werden.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die wahren Abmessungen eines Bildes in Safari und Chrome?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage