Beispielcode-Sharing zur Verwendung von CSS zum Anpassen der Bildgröße

Normalerweise können wir eine CSS-Eigenschaft für das Bild festlegen, um seine Höhe und Breite zu definieren. Aber manchmal möchten wir einfach nur die maximal sichtbare Größe des Bildes steuern. Im Allgemeinen gibt es zwei Möglichkeiten, dies zu tun: 1. CSS-Eigenschaftswerte direkt verwenden; 2. CSS-Werte mithilfe von JavaScript dynamisch festlegen.

1. Feste Größe
Um die Größe des Bildes zu begrenzen, wird im Allgemeinen der folgende HTML-Attributwert oder CSS-Attributwert zur Definition verwendet it:

<img src="http://www.linuxfly.org/logo.gif" width="600" height="500" border="0">
img {
    width: 600px;
    height: 500px;
}

Aber diese Einstellung ist zu starr und nicht flexibel genug.

2. CSS-Attributwerte verwenden

img.qtipImg {
    max-width: 500px; 
    width: 500px;
    width:expression(this.width > 500 ? "500px" : this.width);
    overflow:hidden;
}

Hier wird eine CSS-Regel für das img-Tag unter der qtipImg-Klasse definiert max – Das Breitenattribut steuert das Bild innerhalb des Breitenbereichs von 500 Pixel und passt sich den Proportionen an.
Die Unterstützung dieses Attributs durch verschiedene Browser ist jedoch nicht konsistent. Beispielsweise unterstützt IE6 dieses Attribut nicht.
Daher wird später eine Ausdrucksaktion hinzugefügt. Die Anweisung in Klammern nach dem Operator ist ein JavaScript-Skript, das zur dynamischen Anpassung der Bildgröße verwendet wird.
Der letzte, overflow:hidden, soll verhindern, dass der Teil, der die festgelegte Größe überschreitet, ausgeblendet wird, wenn die Definition der beiden oben genannten Attribute fehlschlägt, um Anzeigeausnahmen zu vermeiden.
Diese Einstellung wurde getestet und funktioniert normal unter IE7, IE8 und FireFox 3.5.

3. Verwenden Sie JavaScript-Skripte
Jeder Browser (einschließlich verschiedener Versionen) unterstützt CSS unterschiedlich. Beispiel: IE 8 hat die Unterstützung für die Ausdrucksaktion eingestellt. Derzeit ist auch die Verwendung von JavaScript zum Anpassen der Bildgröße eine gute Methode. Der Nachteil besteht jedoch darin, dass bei Verwendung reiner JavaScript-Skripte die Größe beim Herunterladen des Bildes überläuft und JavaScript die Größe erst nach Abschluss des Downloads auf den entsprechenden Wert anpasst.
1. Verwenden Sie ein transitives Bildobjekt
Zwei JavaScript-Funktionen:

function getImageSize(FilePath) {   
  var imgSize={width:0,height:0};   
  image=new Image();   
  image.src=FilePath;   
  imgSize.width = image.width;   
  imgSize.height = image.height;   
  return imgSize;   
}
function fixImageSize(originalImage) {
  fixSize = 500;
  if ( originalImage.width > fixSize ) {
    originalImage.height = Math.round( originalImage.height * fixSize / originalImage.width );
    originalImage.width = fixSize;
  }
  return originalImage;
}

Übergeben Sie bei der Verwendung die Adresse des Bildes an diese beiden Funktionen, der Rückgabewert ist das angepasste Bild:

img = getImageSize("http://www.linuxfly.org/logo.gif");
img = fixImageSize(img);
finalresult = &#39;<img src="&#39;+attachUrl+&#39;" width="&#39;+img.width+&#39;" height="&#39;+img.height+&#39;" alt="&#39;+filename+&#39;"/>&#39;;

2. Passen Sie die Größe nach dem Laden des DOM an
Obwohl das CSS die Ausdrucksmethode verwendet abgebrochen werden, aber es ist immer noch eine gute Methode, JavaScript direkt zu verwenden, um den entsprechenden CSS-Wert zu berechnen. Beispielsweise kann die Methode $(document).ready() von jQuery Überlaufprobleme beim Laden von Bildern vermeiden.
Das folgende Skript stammt von: hier

$(document).ready(function() {
    $('.post img').each(function() {
    var maxWidth = 100; // 图片最大宽度
    var maxHeight = 100;    // 图片最大高度
    var ratio = 0;  // 缩放比例
    var width = $(this).width();    // 图片实际宽度
    var height = $(this).height();  // 图片实际高度

    // 检查图片是否超宽
    if(width > maxWidth){
        ratio = maxWidth / width;   // 计算缩放比例
        $(this).css("width", maxWidth); // 设定实际显示宽度
        height = height * ratio;    // 计算等比例缩放后的高度 
        $(this).css("height", height * ratio);  // 设定等比例缩放后的高度
    }

    // 检查图片是否超高
    if(height > maxHeight){
        ratio = maxHeight / height; // 计算缩放比例
        $(this).css("height", maxHeight);   // 设定实际显示高度
        width = width * ratio;    // 计算等比例缩放后的高度
        $(this).css("width", width * ratio);    // 设定等比例缩放后的高度
    }
  });
});

Das obige ist der detaillierte Inhalt vonBeispielcode-Sharing zur Verwendung von CSS zum Anpassen der Bildgröße. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!