Exemple de partage de code sur la façon d'utiliser CSS pour ajuster la taille de l'image

Habituellement, nous pouvons définir une propriété CSS pour l'image afin de définir sa hauteur et sa largeur. Mais parfois, nous souhaitons simplement contrôler la taille maximale visible de l’image. Il existe généralement deux méthodes pour une telle opération : 1. Utiliser directement les valeurs des propriétés CSS ; 2. Utiliser JavaScript pour définir dynamiquement les valeurs CSS ;

1. Taille fixe
Généralement, afin de limiter la taille de l'image, la valeur d'attribut HTML ou la valeur d'attribut CSS suivante est utilisée pour définir it :

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

Mais ce réglage est trop rigide et pas assez flexible.

2. Utilisez les valeurs d'attribut CSS

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

Définit ici une règle CSS pour la balise img sous la classe qtipImg, via max- L'attribut width contrôle l'image dans la plage de largeur de 500 px et s'adapte à la proportion.
Cependant, la prise en charge de cet attribut par différents navigateurs n'est pas cohérente. Par exemple, IE6 ne prend pas en charge cet attribut.
Ainsi, une action d'expression est ajoutée plus tard. L'instruction entre parenthèses après l'opérateur est un script JavaScript, qui est utilisé pour ajuster dynamiquement la taille de l'image.
Le dernier, overflow:hidden, consiste à empêcher que la partie qui dépasse la taille définie ne soit masquée lorsque la définition des deux attributs ci-dessus échoue, afin d'éviter les exceptions d'affichage.
Ce paramètre a été testé et fonctionne normalement sous IE7, IE8 et FireFox 3.5.

3. Utilisez des scripts JavaScript
Chaque navigateur (y compris différentes versions) a un support différent pour CSS. Par exemple : IE 8 a annulé la prise en charge de l'action d'expression. À l’heure actuelle, utiliser JavaScript pour ajuster la taille de l’image est également une bonne méthode. Mais son défaut est qu'en utilisant des scripts JavaScript purs, la taille débordera lors du téléchargement de l'image, et JavaScript n'ajustera pas la taille à la valeur appropriée tant que le téléchargement n'est pas terminé.
1. Utiliser un objet Image transitif
Deux fonctions JavaScript :

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;
}

Lors de l'utilisation, transmettez l'adresse de l'image à ce Deux fonctions, la valeur de retour est l'image ajustée :

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. Ajustez la taille après le chargement du DOM
Bien que le CSS La méthode d'expression sera être annulé, mais c'est toujours une bonne méthode d'utiliser directement JavaScript pour calculer la valeur CSS appropriée. Par exemple, la méthode $(document).ready() de jQuery peut éviter les problèmes de débordement lors du chargement des images.
Le script suivant vient de : ici

$(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);    // 设定等比例缩放后的高度
    }
  });
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!