Example code sharing on how to use CSS to adjust image size

Usually, we can set a CSS property for the image to define its height and width. But sometimes, we just want to control the maximum visible size of the image. There are generally two methods for such an operation: 1. Use CSS property values ​​directly; 2. Use JavaScript to dynamically set CSS values.

1. Fixed size
Generally, in order to limit the size of the image, the following HTML attribute value or CSS attribute value is used to define it:

<img  src="/static/imghwm/default1.png"  data-src="http://www.linuxfly.org/logo.gif"  class="lazy"      style="max-width:90%"  style="max-width:90%" border="0" alt="Example code sharing on how to use CSS to adjust image size" >
img {
    width: 600px;
    height: 500px;
}

But this setting is too rigid and not flexible enough.

2. Use CSS attribute values ​​

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

Here defines a CSS rule for the img tag under the qtipImg class, through the max-width attribute Control the image within the width range of 500px and make it adaptive to proportions.
However, the support of this attribute by various browsers is not consistent. For example, IE6 does not support this attribute.
So, an expression action is added later. The statement in brackets after the operator is a JavaScript script, which is used to dynamically adjust the image size.
The last one, overflow:hidden, is to prevent the part that exceeds the set size from being hidden when the definition of the above two attributes fails, so as to avoid display exceptions.
This setting has been tested and works normally under IE7, IE8, and FireFox 3.5.

3. Use JavaScript script
Each browser (including different versions) has different support for CSS. For example: IE 8 has canceled support for the expression action. At this time, using JavaScript to adjust the image size is also a good method. But its flaw is that using pure JavaScript script, the size will overflow during the download of the image, and JavaScript will not adjust its size to the appropriate value until the download is completed.
1. With the help of a transferred Image object
Two JavaScript functions:

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

When used, pass the address of the image to these two function, the return value is the adjusted image:

img = getImageSize("http://www.linuxfly.org/logo.gif");
img = fixImageSize(img);
finalresult = &#39;<img src="/static/imghwm/default1.png"  data-src="&#39;+attachUrl+&#39;"  class="lazy"      style="max-width:90%" height="&#39;+img.height+&#39;" alt="&#39;+filename+&#39;"/>&#39;;

2. Adjust the size after loading the DOM
Although the CSS expression method will Canceled, but it is still a good method to directly use JavaScript to calculate appropriate CSS values. For example, jQuery's $(document).ready() method can avoid overflow problems when loading images.
The following script comes from: here

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

The above is the detailed content of Example code sharing on how to use CSS to adjust image size. For more information, please follow other related articles on the PHP Chinese website!