Gibt es JavaScript- oder jQuery-APIs oder -Methoden, um die Abmessungen eines Bildes auf der Seite abzurufen?
javascript
jquery
image
jquery-plugins
Saneef
quelle
quelle
Antworten:
Sie können das Bild programmgesteuert abrufen und die Abmessungen mit Javascript überprüfen ...
Dies kann nützlich sein, wenn das Bild nicht Teil des Markups ist.
quelle
clientWidth und clientHeight sind DOM-Eigenschaften, die die aktuelle Größe der inneren Dimensionen eines DOM-Elements im Browser anzeigen (ohne Rand und Rand). Im Fall eines IMG-Elements erhält dies die tatsächlichen Abmessungen des sichtbaren Bildes.
quelle
$.fn.width
und$.fn.height
.document.getElementById
ist länger zu tippen, aber 10 mal schneller als$('#...')[0]
.Außerdem (zusätzlich zu den Antworten von Rex und Ian) gibt es:
und
Diese geben die Höhe und Breite der Bilddatei selbst an (und nicht nur das Bildelement).
quelle
Wenn Sie jQuery verwenden und Bildgrößen anfordern, müssen Sie warten, bis sie geladen werden, da sonst nur Nullen angezeigt werden.
quelle
Ich denke, ein Update dieser Antworten ist nützlich, da eine der am besten bewerteten Antworten die Verwendung vorschlägt
clientWidth
bewerteten und clientHeight vorschlägt, was meiner Meinung nach mittlerweile veraltet ist.Ich habe einige Experimente mit HTML5 durchgeführt, um festzustellen, welche Werte tatsächlich zurückgegeben werden.
Zunächst habe ich ein Programm namens Dash verwendet, um einen Überblick über die Image-API zu erhalten. Es gibt an, dass
height
undwidth
die gerenderte Höhe / Breite des Bildes sind und dassnaturalHeight
undnaturalWidth
die intrinsische Höhe / Breite des Bildes sind (und nur HTML5 sind).Ich habe ein Bild eines schönen Schmetterlings aus einer Datei mit einer Höhe von 300 und einer Breite von 400 verwendet. Und dieses Javascript:
Dann habe ich diesen HTML-Code mit Inline-CSS für Höhe und Breite verwendet.
Ergebnisse:
Ich habe dann den HTML-Code wie folgt geändert:
dh Verwenden von Höhen- und Breitenattributen anstelle von Inline-Stilen
Ergebnisse:
Ich habe dann den HTML-Code wie folgt geändert:
dh sowohl Attribute als auch CSS verwenden, um zu sehen, welche Vorrang haben.
Ergebnisse:
quelle
Mit JQuery gehen Sie folgendermaßen vor:
quelle
width
undheight
desimg
Elements zu lesen .Alle anderen haben vergessen, dass Sie die Bildgröße vor dem Laden nicht überprüfen können. Wenn der Autor alle veröffentlichten Methoden überprüft, funktioniert dies wahrscheinlich nur auf localhost. Da jQuery hier verwendet werden kann, denken Sie daran, dass das Ereignis 'ready' ausgelöst wird, bevor Bilder geladen werden. $ ('# xxx'). width () und .height () sollten bei einem Onload-Ereignis oder höher ausgelöst werden.
quelle
Sie können dies nur mit einem Rückruf des Ladeereignisses tun, da die Größe des Bildes erst bekannt ist, wenn das Laden tatsächlich abgeschlossen ist. So etwas wie der Code unten ...
quelle
Mit jQuery library-
Verwenden Sie
.width()
und.height()
.Mehr in jQuery-Breite und jQuery-Höhe .
Beispiel Code-
quelle
ok Leute, ich denke, ich habe den Quellcode verbessert, damit das Bild geladen werden kann, bevor versucht wird, seine Eigenschaften herauszufinden. Andernfalls wird '0 * 0' angezeigt, da die nächste Anweisung aufgerufen worden wäre, bevor die Datei geladen wurde der Browser. Benötigt jquery ...
quelle
Angenommen, wir möchten Bildabmessungen von erhalten
<img id="an-img" src"...">
Natürliche Dimensionen
el.naturalWidth
undel.naturalHeight
erhalten wir die natürlichen Dimensionen , die Dimensionen der Bilddatei.Layoutabmessungen
el.offsetWidth
undel.offsetHeight
erhalten die Abmessungen, mit denen das Element im Dokument gerendert wird.quelle
Bevor Sie die reale Bildgröße verwenden, sollten Sie das Quellbild laden. Wenn Sie das JQuery-Framework verwenden, können Sie auf einfache Weise eine echte Bildgröße erhalten.
quelle
Diese Antwort war genau das, wonach ich gesucht habe (in jQuery):
quelle
Sie können eine einfache Funktion wie die folgende (
imageDimensions()
) haben, wenn Sie keine Angst haben, Versprechen zu verwenden .quelle
JQuery Antwort:
quelle
Dachte, dies könnte für einige hilfreich sein, die 2019 Javascript und / oder Typescript verwenden.
Ich fand Folgendes, wie einige vorgeschlagen haben, falsch:
Das ist richtig:
Fazit:
Verwenden Sie
img
nichtthis
inonload
Funktion.quelle
Vor kurzem hatte ich das gleiche Problem für einen Fehler im Flex-Schieberegler. Die Höhe des ersten Bildes wurde aufgrund der Ladeverzögerung kleiner eingestellt. Ich habe die folgende Methode zur Lösung dieses Problems ausprobiert und es hat funktioniert.
Dies gibt Ihnen die Höhe in Bezug auf die von Ihnen eingestellte Breite anstelle der ursprünglichen Breite oder Null.
quelle
Sie können auch verwenden:
quelle
Nicky De Maeyer fragte nach einem Hintergrundbild; Ich bekomme es einfach aus dem CSS und ersetze die "url ()":
quelle
s.substr(4,s.length-5)
, es ist zumindest augenschonender;)Sie können die Eigenschaft onload handler anwenden, wenn die Seite in js oder jquery wie folgt geladen wird: -
quelle
Sie können einfach so testen.
quelle
quelle
Es ist wichtig, die vom Browser interpretierte Einstellung aus dem übergeordneten div zu entfernen. Wenn Sie also die tatsächliche Bildbreite und -höhe wünschen, können Sie diese einfach verwenden
Dies ist ein Beispiel für ein TYPO3-Projekt von mir, bei dem ich die realen Eigenschaften des Bildes benötige, um es mit der richtigen Beziehung zu skalieren.
quelle
Dies ist meine Methode, hoffe das hilfreich. :) :)
quelle
Dies funktioniert für die Vorschau und das Hochladen mehrerer Bilder. wenn Sie für jedes der Bilder einzeln auswählen müssen. Dann kopieren und in alle Vorschaubildfunktionen einfügen und validieren !!!
quelle
Vor dem Erfassen der Elementattribute sollte die Dokumentseite geladen sein:
quelle
Übergeben Sie einfach das img-Dateiobjekt, das vom Eingabeelement erhalten wird, wenn wir die richtige Datei auswählen. Es gibt die Netzhöhe und -breite des Bildes an
quelle