JavaScript ändert die Größe von Bildern dynamisch

Ein häufiges Problem beim Aktualisieren von Artikeln auf der eigenen Website besteht darin, dass die Artikelabbildungen zu breit sind, wodurch die gesamte Webseite verzerrt wird. Es wäre zu aufwendig, jede Abbildung vor dem Einfügen zu skalieren.

Ich bin in einem Artikel, den ich vor einiger Zeit geschrieben habe, auf so etwas gestoßen. Später habe ich CSS-Überlauf- und Max-Width-Eigenschaften verwendet, um das Problem der Seitenverformung vorübergehend zu lösen. Der Vorteil dieser Methode besteht darin, dass sie einfach ist, der Nachteil besteht jedoch darin, dass dadurch die Wirkung einiger Details zerstört wird.

Beispielsweise bedeutet overflow:hidden, dass die überschüssige Breite ausgeblendet wird, wenn die Breite des internen Elements größer als die des übergeordneten Rahmens ist. Dies kann dazu führen, dass einige Inhalte plötzlich abgeschnitten und ausgeblendet werden, was für das Publikum schade ist.

Wenn Sie die maximale Breite von Artikelabbildungen durch das Attribut „max-width“ begrenzen, müssen Sie die Kompatibilität der einzelnen Browser berücksichtigen. IE6 unterstützt dieses Attribut nicht, obwohl einige Browser dieses Attribut unterstützen (es scheint Safari und Opera zu sein, ich kann mich nicht genau erinnern, ob dies schädlich ist). gegenüber Nutzern dieser Browser sehr unfair.

Daher habe ich mich letztendlich dafür entschieden, die Bildgröße dynamisch über JavaScript zu ändern. Diese Methode weist eine gute Kompatibilität mit verschiedenen Browsern auf (heutzutage würden die wenigsten Menschen JavaScript deaktivieren, oder?), und wenn das Thema geändert wird, kann auch die maximale Größe der Artikelabbildungen flexibel geändert werden.

Es gibt zwei Lösungen. Da das von mir verwendete Theme mit der jQuery-Bibliothek geladen wird, kann es mit dem folgenden Code implementiert werden:

$ ( Dokument ) . Bereit ( Funktion ( ) {
 $ ( '.post img' ) . every ( function ( ) {
 var maxWidth = 100 ; // Maximale Bildbreite
 var maxHeight = 100 ; // Maximale Höhe des Bildes
 var ratio = 0 ; // Skalierungsverhältnis
 var width = $ ( this ) . // Tatsächliche Breite des Bildes
 var height = $ ( this ) . // Tatsächliche Höhe des Bildes

 // Überprüfe, ob das Bild superbreit ist
 if ( width > maxWidth ) {
 ratio = maxWidth / width ; // Skalierungsverhältnis berechnen
 $ ( this ) . css ( "width" , maxWidth ) ; // Legt die tatsächliche Anzeigebreite fest
 Höhe = Höhe * Verhältnis ; // Höhe nach gleicher Skalierung berechnen
 $ ( this ) .css ( "height" , height * ratio ) ; // Höhe nach proportionaler Skalierung festlegen
 }

 // Überprüfe, ob das Bild sehr groß ist
 if ( height > maxHeight ) {
 ratio = maxHeight / height ; // Skalierungsverhältnis berechnen
 $ ( this ) . css ( "height" , maxHeight ) ; // Setzt die tatsächliche Anzeigehöhe
 width = width * ratio ; // Höhe nach gleicher Skalierung berechnen
 $ ( this ) .css ( "width" , width * ratio ) ; // Höhe nach proportionaler Skalierung festlegen
 }
 } ) ;
 } ) ;

Wenn Sie die jQuery-Bibliothek nicht laden möchten, können Sie den folgenden Code verwenden:

 Funktion ResizeImage ( Bild , maximale Breite der Abbildung , maximale Höhe der Abbildung )
 {
 if ( image. className == "Thumbnail" )
 {
 w = image.width ;
 h = image.height ;

 if ( w == 0 || h == 0 )
 {
 image.width = maxwidth ;
 image.height = maxheight ;
 }
 sonst wenn ( w > h )
 {
 if ( w > maxwidth ) image.width = maxwidth ;
 }
 anders
 {
 if ( h > maxheight ) image .
 }

 image.className = "ScaledThumbnail" ;
 }
 }

Die Verwendung von reinem JavaScript ist etwas aufwändiger, da Sie „class="Thumbnail" manuell zum Bild hinzufügen müssen, aber der Endeffekt ist derselbe.

Originaltext: Bildgröße dynamisch anpassen

Danke Bolo für deinen Beitrag