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

来源：懂视网责编：小采时间：2020-11-27 18:50:26

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

如何使用CSS调整图片大小的实例代码分享: 通常，我们可以给图片<img>设置一个CSS属性，定义其高度和宽度。但有时候，我们只希望控制图片的最大可见大小。这样的操作，一般有两种办法：1.直接使用CSS属性值；2.使用JavaScript动态设置CSS值。一、固定大小一般，为了限制图片的大小，会使用下面

推荐度：

点击下载本文 文档为doc格式

导读如何使用CSS调整图片大小的实例代码分享: 通常，我们可以给图片<img>设置一个CSS属性，定义其高度和宽度。但有时候，我们只希望控制图片的最大可见大小。这样的操作，一般有两种办法：1.直接使用CSS属性值；2.使用JavaScript动态设置CSS值。一、固定大小一般，为了限制图片的大小，会使用下面

通常，我们可以给图片<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调整图片大小的实例代码分享

推荐度：

点击下载本文 文档为doc格式

标签：设置图片如何用

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐