如何使用CSS调整图片大小的实例代码分享

宜家博客
宜家博客
宜家博客
48036
文章
0
评论
2020年7月1日04:20:41 评论 5 2171字阅读7分14秒

通常,我们可以给图片<img>设置一个CSS属性,定义其高度和宽度。但有时候,我们只希望控制图片的最大可见大小。这样的操作,一般有两种办法:1.直接使用CSS属性值;2.使用JavaScript动态设置CSS值。

一、固定大小
一般,为了限制图片的大小,会使用下面的HTML属性值或CSS属性值来定义:

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

但这样的设置太死板,不够灵活。

二、利用CSS属性值

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

这里定义了一个qtipImg类下面的img标签用CSS规则,通过max-width属性把图片控制在500px的宽度范围,并且是自适应比例的。
但是,各浏览器对该属性的支持并不一致,如IE6不支持该属性。
所以,后面又增加了一个expression的动作,该操作符后面括号中的语句是JavaScript脚本,用于动态的调整图片大小的。
而最后的,overflow:hidden 则是为了防止上述两属性定义失效时,将超出设置大小的部分隐藏起来,避免显示异常。
该设定经测试,在IE7、IE8、FireFox 3.5 下使用都很正常。

三、利用JavaScript 脚本
每个浏览器(包括版本不同)对CSS的支持都会有区别。例如:IE 8下就取消了对expression动作的支持。这时,利用JavaScript来调整图片大小也是一个不错的方法。但它的缺陷在于,使用纯JavaScript脚本,在图片下载期间,大小会溢出,直到下载完成,JavaScript才会把其大小调整到合适的值。
1、借助一个中转的Image对象
两个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;
}

使用时,把图片的地址传递给这两个函数,返回值即为调整后的图片:

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

2、在加载完DOM后即调整大小
虽然CSS的expression方式将会被取消,但直接使用JavaScript方式计算合适的CSS值还是一个不错的方法。例如jQuery的$(document).ready()方法可以避免加载图片时溢出的问题。
以下脚本来自:这里

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

以上就是如何使用CSS调整图片大小的实例代码分享的详细内容,更多请关注css教程其它相关文章!

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
宜家博客
CSS有多少清除浮动的方式 css教程

CSS有多少清除浮动的方式

这次给大家带来CSS有多少清除浮动的方式,清除浮动的注意事项有哪些,下面就是实战案例,一起来看一下。 1、设置父元素高度 如果一个元素要浮动,那么它的祖先元素一定要有高度.高度的盒子,才能关住浮动 只...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: