视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
如何使用CSS调整图片大小的实例代码分享
2020-11-27 18:50:26 责编:小采
文档

通常,我们可以给图片<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); // 设定等比例缩放后的高度
 }
 });
});

下载本文
显示全文
专题