Gibt es eine JavaScript- oder jQuery-API oder -Methode, um die Abmessungen eines Bilds auf der Seite abzurufen?
So erhalten Sie die Bildgröße (Höhe und Breite) mit JavaScript
Lesezeit: 4 Minuten
14424400cookie-checkSo erhalten Sie die Bildgröße (Höhe und Breite) mit JavaScript
Sanef
Rex M
clientBreite Und clientHöhe sind DOM-Eigenschaften, die die aktuelle In-Browser-Größe der Innenabmessungen eines DOM-Elements (ohne Rand und Rahmen) anzeigen. Im Fall eines IMG-Elements erhält dieses also die tatsächlichen Abmessungen des sichtbaren Bilds.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
-
@ Nicky genau richtig. Es gibt die Abmessungen des Bildes an wie es in diesem Fall wiedergegeben wird.
– Rex M
1. September 2011 um 9:33 Uhr
-
@Mat-visuell
$.fn.widthUnd$.fn.height.– yckart
2. April 2013 um 6:05 Uhr
-
Die richtige Antwort ist die Verwendung von img.naturalWidth und img.naturalHeight
– Krake
12. Oktober 2013 um 4:33 Uhr
-
document.getElementByIdist länger zu tippen, aber 10 mal schneller als$('#...')[0].– bfontaine
12. August 2014 um 9:57 Uhr
-
@RexM Auf Chrome 35 ist es 16-mal schneller: jsperf.com/document-getelementbyid-vs-jquery/5
– bfontaine
12. August 2014 um 13:52 Uhr
Wenn Sie jQuery verwenden und Bildgrößen anfordern, müssen Sie warten, bis sie geladen werden, oder Sie erhalten nur Nullen.
$(document).ready(function() {
$("img").load(function() {
alert($(this).height());
alert($(this).width());
});
});
-
Ist Breite und Höhe immer im Lastaufnahmemittel vorhanden?
– Anders Lindén
12. September 2014 um 12:35 Uhr
-
@AndersLindén – siehe die Link-Tinte, die Akseli für das Ladeereignis hinzugefügt hat. Den Bildern ist ein eigener Abschnitt gewidmet. Die technische Antwort lautet „nein“, aber in der Praxis hatte ich noch nie ein Problem mit unseren Websites, die diese Methode verwenden.
– mrtsherman
15. September 2014 um 19:36 Uhr
-
Aber wenn die technische Antwort nein ist, ist es unbrauchbar? Ist es nicht?
– Anders Lindén
16. September 2014 um 6:14 Uhr
-
Ist es möglich, die Bildattribute vor dem Laden abzurufen?
– nein nein
17. März 2019 um 16:57 Uhr
Peter Mortensen
Verwenden clientWidth und clientHeight ist, denke ich, jetzt veraltet.
Ich habe einige Experimente mit HTML5 durchgeführt, um zu sehen, welche Werte tatsächlich zurückgegeben werden.
Zunächst habe ich ein Programm namens Dash verwendet, um mir einen Überblick über die Bild-API zu verschaffen.
Es sagt, dass height Und width sind die gerenderte Höhe/Breite des Bildes und das naturalHeight Und naturalWidth sind die eigentliche Höhe/Breite des Bildes (und sind nur HTML5).
Ich habe ein Bild eines wunderschönen Schmetterlings aus einer Datei mit einer Höhe von 300 und einer Breite von 400 verwendet. Und dieser JavaScript-Code:
var img = document.getElementById("img1");
console.log(img.height, img.width);
console.log(img.naturalHeight, img.naturalWidth);
console.log($("#img1").height(), $("#img1").width());
Dann habe ich dieses HTML verwendet, mit Inline-CSS für die Höhe und Breite.
<img style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
Ergebnisse:
/* Image element */ height == 300 width == 400
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 120 width() == 150
/* Actual rendered size */ 120 150
Dann habe ich den HTML-Code wie folgt geändert:
<img height="90" width="115" id="img1" src="img/Butterfly.jpg" />
Das heißt, die Verwendung von Höhen- und Breitenattributen anstelle von Inline-Stilen.
Ergebnisse:
/* Image element */ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 90 width() == 115
/* Actual rendered size */ 90 115
Dann habe ich den HTML-Code wie folgt geändert:
<img height="90" width="115" style="height:120px;width:150px;" id="img1" src="img/Butterfly.jpg" />
Das heißt, sowohl Attribute als auch CSS verwenden, um zu sehen, was Vorrang hat.
Ergebnisse:
/* Image element */ height == 90 width == 115
naturalHeight == 300 naturalWidth == 400
/* jQuery */ height() == 120 width() == 150
/* Actual rendered size */ 120 150
-
Ist Breite und Höhe immer im Lastaufnahmemittel vorhanden?
– Anders Lindén
12. September 2014 um 12:35 Uhr
-
@AndersLindén – siehe die Link-Tinte, die Akseli für das Ladeereignis hinzugefügt hat. Den Bildern ist ein eigener Abschnitt gewidmet. Die technische Antwort lautet „nein“, aber in der Praxis hatte ich noch nie ein Problem mit unseren Websites, die diese Methode verwenden.
– mrtsherman
15. September 2014 um 19:36 Uhr
-
Aber wenn die technische Antwort nein ist, ist es unbrauchbar? Ist es nicht?
– Anders Lindén
16. September 2014 um 6:14 Uhr
-
Ist es möglich, die Bildattribute vor dem Laden abzurufen?
– nein nein
17. März 2019 um 16:57 Uhr
Peter Mortensen
Verwenden jQueryDu machst das:
var imgWidth = $("#imgIDWhatever").width();
-
Und wenn das Bild noch nicht geladen wurde?
– James Westgate
2. Juni 2011 um 9:30 Uhr
Mit modernen Browsern geht das ganz einfach: davidwalsh.name/get-image-dimensions
– Jarin
9. Januar 2015 um 5:08 Uhr
Die meisten der folgenden Antworten erhalten nur die Stilbreite und -höhe, nicht die tatsächliche Breite und Höhe des Bildes. Verwenden
imgElement.naturalWidthUndimgElement.naturalHeightum Breite und Höhe zu bekommen.– Bamdad
29. Dezember 2020 um 8:09 Uhr
Unabhängig davon, ob Sie Javascript oder jQuery verwenden möchten Es ist wichtig, dass das Bild im Browser sichtbar ist. In der Praxis müssen weder das Bild noch die Elternelemente die Regel haben
display:none;.– Vincenzo di Gaetano
4. September 2022 um 9:31 Uhr