Bilder in Originalgröße abrufen

Wenn Sie mit jQuery ein Bild auswählen und dann .width() verwenden, erhalten Sie die aktuelle Breite des Bildes, auch wenn es skaliert wurde (z. B. max-width: 100 %). Sie können auf die native Breite des Bildes zugreifen (auch wenn es keine Attribute hat, die sie deklarieren) wie folgt:

// Get on screen image
var screenImage = $("#image");

// Create new offscreen image to test
var theImage = new Image();
theImage.src = screenImage.attr("src");

// Get accurate measurements from that.
var imageWidth = theImage.width;
var imageHeight = theImage.height;

Kommentare

Hans Kuijpers

# 15. Oktober 2011

Hallo Chris,

Wenn ich mir den Code ansehe, verstehe ich zwei Dinge nicht:
1. Warum verwenden Sie die zuerst erstellte Variable screenImage nicht weiter im Skript?
2. Woher kommt mainScreenshot?

(Ich versuche, ein bisschen jQuery zu lernen)

Antworten

Chris Coyier

Permalink zum Kommentar# 15. Oktober 2011

Ich hatte das gerade ein wenig durcheinandergebracht, die Variablenreferenz ist jetzt korrekt.

Saeed Neamati

# 16. Oktober 2011

Sehr subtil, Chris. Dies ist eine großartige Nutzung nativer JavaScript-Objekte. Ich denke, es könnte einfach zu einem jQuery-Plugin werden, wie z. B.:


$('#image-id').realWidth();

Antworten

Richard

# 27. Oktober 2011

Ich habe bei der Arbeit an einem benutzerdefinierten Karussell entdeckt, dass Chrome/FF ein zusätzliches Attribut für Bilder hatten. Hier ist eine kleine Funktion, die ich geschrieben habe, die die Eigenschaften verwendet, wenn sie vorhanden sind, und sie setzt, wenn sie es nicht sind. Eine große Annahme (wie beim ursprünglichen Beispiel) ist, dass die Größen sofort verfügbar sind. Technisch gesehen wäre eine separate Funktion für Browser ohne „natural(width|height)“, die den Wert auffüllt, bevor Sie ihn benötigen, „sicherer“.

function imgRealSize(img) {
	var $img = $(img);
	if ($img.prop('naturalWidth') == undefined) {
		var $tmpImg = $('<img/>').attr('src', $img.attr('src'));
		$img.prop('naturalWidth', $tmpImg[0].width);
		$img.prop('naturalHeight', $tmpImg[0].height);
	}
	return { 'width': $img.prop('naturalWidth'), 'height': $img.prop('naturalHeight') }
}

Antworten

Kwadwo

# 10. November 2011

Hallo Chris,
Daumen hoch für deine Hilfe. Ich finde den ‚RevealingPhotoSlider‘ sehr interessant, allerdings ist er nicht mit Chrome kompatibel. Beim Klicken auf ‚MEHR INFOS‘ zeigt Chrome das Bild nicht an, sondern verkleinert es. Auch in IE8. Ich erstelle gerade meine Website, daher habe ich keinen ‚Live‘-Link und konnte daher keine Webadresse angeben, tut mir leid, und ich hoffe, bald von Ihnen zu hören.

Vielen Dank.

Antworten

Graham

# 10. Dezember 2012

Ich habe festgestellt, dass dies in Chrome nur innerhalb von $(window).load funktioniert — $(document).ready scheint zu früh ausgelöst zu werden.

Antworten

Savec

Permalink zum Kommentar# 23. Dezember 2015

Graham, du hast mir den Tag gerettet!

clemi

# 28. Januar 2013

@Graham: Nur das Bild muss geladen sein, bevor berechnet wird, Sie können $(‚#image‘).load verwenden
funktioniert in allen bisher getesteten Browsern, auch mobil

vielen Dank, Chris

Antworten

Ravi

# 13. Oktober 2013

gibt native Höhe und Breite als Null zurück.

Antworten

Liam Monticelli

# 21. Oktober 2013

Es wird zwangsläufig Fälle geben, in denen wir die Abmessungen eines Bildes benötigen, das noch nicht geladen ist, z. B. ein Bild in einer ausgeblendeten Schicht. Hier ist die Umgehungslösung, die ich für solche Situationen gefunden habe:

  $(imgs).each(function(){

    // Create new offscreen image to test
    var theImage = new Image();
    theImage.src = $(this).attr("src");
    // Add a reference to the original.
    $(theImage).data("original",this);

    // Get accurate measurements from that.
    $(theImage).load(function(){
      var imageWidth = this.width;
      var imageHeight = this.height;
      $($($(this).data("original")).css("width",imageWidth+"px");
    });
  });

wobei imgs eine Sammlung von <img>-Elementen ist.

Antworten

Adam

# 11. November 2013

Es gibt ein Problem beim Abrufen der nativen Breite in Firefox und IE

Gibt es eine Möglichkeit, dieses Problem zu beheben?

Antworten

sssss sasad

Permalink zum Kommentar# 27. August 2015

ssssa dsadsad
sssss sasad

Permalink zum Kommentar# 27. August 2015

asd aasd asd

Tharaka

# 10. Dezember 2013

Wenn das Bild zwischengespeichert ist (z. B. mit einer Ausgabe, die in IIS 7.5 zwischengespeichert wurde), funktionierte die obige Methode auf iPhone 5+ nicht.

Antworten

Jens

# 24. Januar 2014

Gute Idee, aber funktioniert nicht… das folgende Skript erledigt die Aufgabe für mich.

jQuery.fn.realSize = function() {

var i = $(this.filter( 'img')).first();

if( i) {

    if( !i.data( 'realSize')) {

        var _w = i.width(),
            _h = i.height();

        i.width( 'auto').height( 'auto');

        i.data( 'realSize', { width: i.width(),
                              height: i.height()});

        i.width( _w).height( _h);


    }

    return i.data( 'realSize');

}

return undefined;

};

jQuery.fn.realWidth = function( options) {

var rs = this.realSize();

return rs ? rs.width : undefined;

};

jQuery.fn.realHeight = function( options) {

var rs = this.realSize();

return rs ? rs.height : undefined;

};

$( ‚img‘).realSize(); // Object {width: 960, height: 720}

Antworten

angel

# 3. Februar 2014

Jens deine Lösung funktioniert bei mir einwandfrei ;)
Ich füge dies der jQuery JavaScript Library v2.1.0 hinzu

Perfekt, danke Mann

Antworten

Jamie

# 19. März 2014

Genau das, was ich heute gebraucht habe! Danke – auch nach ein paar Jahren immer noch nützlich :)

Antworten

Ian

# 27. März 2014

Chris / Alle
Gibt es eine Möglichkeit, so etwas zu tun?

img width:100%;
img max-width:NATURAL;

Ich möchte also nicht, dass ein Bild verpixelt wird, aber wenn es groß genug ist, soll es auf 100 % gehen.

Antworten

slomo

Permalink zum Kommentar# 26. Juni 2014
Ian, das sollte so einfach sein wie
```
img {
    width: auto;
    max-width: 100%;
}
```

jens

# 27. März 2014

Hallo Chris,

Ich glaube, das Folgende erledigt die Aufgabe für Sie.

$( ‚img‘).css( ‚max-width‘: $( ‚img‘).realSize().width);

Antworten

Ian

# 27. März 2014

jQuery ist in Ordnung, aber ich suchte nach einer reinen CSS-Antwort. Es erscheint seltsam, dass man die natürliche Bildbreite nicht angeben kann, es sei denn, man lässt die CSS-Breite ganz weg.

Antworten

Kenyon

# 24. April 2014

Das funktioniert hervorragend für lokale Bilder, aber wenn Bilder auf einem CDN verwendet werden, scheint die Größe nur beim ersten Laden erfasst zu werden. Wenn Sie die Funktion bei window.resize aufrufen, gibt die Funktion 0 zurück.

Hier ist ein jsFiddle: http://jsfiddle.net/WKzJ4/2/

Irgendwelche Lösungen dafür?

Antworten

Brian

Permalink zum Kommentar# 13. August 2014

Kenyon,

Haben Sie jemals eine Lösung gefunden, um die natürliche Größe eines Bildes auf einem CDN zu ermitteln? Danke für jede Hilfe.

Jens

# 24. April 2014

Hallo Kenyon,

Ich bin mir nicht sicher, was Sie tun möchten. Der Sinn des Codes war es, die ursprüngliche Größe eines Bildes zu bestimmen.

Übrigens: Die Ermittlung der Originalgröße eines Bildes mit „new Image()“ funktioniert nicht richtig.

Antworten

Mark Stickling

# 2. Dezember 2014

In iOS 8
Bekommen noch andere dieses Codes:
die Höhe für die Breite
und die Breite für die Höhe
wenn man ein Hochformatfoto mit der Kamera aufnimmt?

Ich vermute, das Foto wird zu diesem Zeitpunkt noch nicht gedreht oder so etwas. Aber wenn das Bild auf dem Bildschirm geladen ist, ist es richtig herum. Verwirrt.

Antworten

Pavel

# 23. Januar 2015

Sie müssen warten, bis das Bild geladen ist
Etwas wie das

var img = new Image();
img.onload = function() {
  console.log(this.width + 'x' + this.height);
};
img.src = /whatever you need/

Antworten

Mark Stickling

Permalink zum Kommentar# 23. Januar 2015

Danke, ich werde das ausprobieren.

Andreas Böhrnsen

# 27. November 2015

Funktioniert super! Danke.

Antworten

Kommentare

Antwort hinterlassen Antwort abbrechen