Ausführliche Erklärung, wie man mit JavaScript die wahre Größe eines Bildes ermittelt

Die Größen der Bilder auf Webseiten scheinen alle gleich zu sein. In den Artikelseiten, die wir am häufigsten mit mehreren Bildern sehen, entspricht die Größe der Bilder normalerweise der Breite der Seite. Auf diese Weise sieht die Seite wie ein gerader Zylinder aus fühle mich sehr eintönig. Der Grund für diese Situation liegt meiner Meinung nach größtenteils in den Einschränkungen alter Browser. Mit der Beliebtheit moderner Browser (Firefox/Google/IE11) unterliegen Browser jedoch immer weniger Einschränkungen beim Seitendesign, und die Fantasie von Webprogrammierern kann stark genutzt werden.

Zum Beispiel Wissenswertes: Wissen Sie, woher das [x] in jedem Fenster kommt? In diesem Artikel überschreiten viele Bilder die Grenze der Textbreite, was den Menschen ein Gefühl der Unebenheit vermittelt. Gleichzeitig vermittelt die Anzeige großer Bilder in ihrer tatsächlichen Größe ein schockierenderes Gefühl.

Aber technisch gesehen können wir die Bilder leicht durch die maximale Breite des Textes begrenzen, sodass sie alle die gleiche Breite beibehalten. Anstatt auf die Breite des Textes zu drücken, muss jedes Bild seine eigene Größe haben . Bei der serverseitigen Bearbeitung können wir die Originalgröße des Bildes angeben. Eine flexiblere Möglichkeit besteht darin, die Originalgröße des Bildes dynamisch zu erhalten, indem ein Teil von js auf der Seite platziert wird, und die Anzeigegröße des Bildes dynamisch zu ändern. Dies ist nicht nur mit der alten Methode zur Maximierung der Textbreite kompatibel, sondern ermöglicht auch, dass Bilder bei Bedarf in ihrer Originalgröße angezeigt werden.

Wie erhalte ich mit JavaScript die Originalgröße des Bildes auf der Browserseite?

var img = $("#img_id"); // 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.
    });

Webkit-Browser (Google Chrome usw.) können die Höhen- und Breitenwerte erst nach dem Ladeereignis des Bildes abrufen. Daher können Sie die Timeout-Funktion nicht verwenden, um das Warten zu verzögern. Am besten verwenden Sie das Onload-Ereignis des Bildes.

Um den Einfluss von CSS auf die Bildgröße zu vermeiden, kopiert der obige Code das Bild zur Berechnung in den Speicher.

Wenn es sich bei Ihrer Seite um eine altmodische Seite handelt, können Sie diesen Code bei Bedarf unten auf der Seite einbetten. Es ist nicht erforderlich, dass Sie die Originalseite ändern.

Siehe Stackoverflow

Empfohlenes Tutorial: „JavaScript Basic Tutorial“

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man mit JavaScript die wahre Größe eines Bildes ermittelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!