Die Größe der Bilder auf der Webseite scheint gleich zu sein. Auf den häufigsten Artikelseiten mit mehreren Bildern entspricht die Größe des Bildes normalerweise die Breite der Seite. Auf diese Weise sieht die Seite wie eine gerade zylindrische Form aus. Wenn Sie zu viel von diesem Layout sehen, werden Sie sich sehr eintönig fühlen. Ich denke, diese Situation ist größtenteils auf die Grenzen altmodischer Browser zurückzuführen. Mit der Beliebtheit moderner Browser (Firefox/Google/IE11) haben Browser jedoch immer weniger Einschränkungen für das Seitendesign, und die Fantasie von Webprogrammierern kann stark ausgeübt werden.
Zum Beispiel Leng Zhi: Weißt du, wie das [x], aus dem jedes Fenster stammt? In diesem Artikel übertreffen viele Bilder die Grenze der Textbreite und verleihen den Menschen ein Gefühl von erstaunlichem und atemberaubendem. Gleichzeitig werden große Bilder in ihrer realen Größe angezeigt, was den Menschen ein schockierteres Gefühl verleiht.
Technisch gesehen können wir die Bilder jedoch leicht mit der maximalen Breite des Textes einschränken, damit sie alle eine Breite beibehalten, und wenn wir nicht der Breite des Textes folgen, benötigen wir die Größe jedes Bildes. Wir können die ursprüngliche Größe des Bildes bei der Bearbeitung auf dem Server deklarieren. Eine flexiblere Möglichkeit besteht darin, die ursprüngliche Größe des Bildes dynamisch zu erhalten, indem ein Stück JS auf der Seite platziert und die Anzeigegröße des Bildes dynamisch geändert wird. Dies ist mit der maximalen Breite des alten Textes kompatibel und kann das Bild bei Bedarf auch seine ursprüngliche Größe erscheint.
Wie bekomme ich die ursprüngliche Größe des Bildes auf der Browserseite mit JavaScript?
Die Codekopie lautet wie folgt:
var img = $ ("#img_id"); // Holen Sie sich mein IMG Elem
var pic_real_width, pic_real_height;
$ ("<img/>") // in Speicherkopie des Bildes machen, um CSS -Probleme zu vermeiden
.Attr ("Src", $ (IMG) .Attr ("Src"))
.load (function () {
pic_real_width = this.width; // Hinweis: $ (this) .width () nicht
pic_real_height = this.height; // in Speicherbildern arbeiten.
});
Der Webkit -Browser (Google Chrome usw.) kann nach dem geladenen Ereignis des Bildes nur Höhe- und Breitenwerte erhalten. Sie können also die Timeout -Funktion nicht verwenden, um verzögert zu warten. Am besten verwenden Sie das Onload -Ereignis des Bildes.
Um die Auswirkungen von CSS auf die Größe des Bildes 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 nach Bedarf unten auf der Seite einbetten, und Sie müssen nicht die Originalseite ändern.