用CSS同比例缩小图片

当然,生成缩略图这个工作如果交给程序来完成,效果会好很多,但是有时出于某种因素,例如服务器不支持GD之类的,难免就要请CSS代劳。

把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可。

对于IE 6.0及以下版本,以上两条CSS属性均不会被理会。之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件。例如:

这固然能解决问题,但是对以后页面的升级会带来麻烦——随着浏览器对CSS支持的完善,我们迟早会把图片上的onload事件统统去除。该是Expression的Show Time了,既然IE支持通过Expression在CSS中放置一些脚本,而这段脚本又只是提供给IE 6.0及以下版本使用,那么把它写到Expression中再合适不过。

最终,把一副大图片按比例缩小到50px*50px以内,可以参照以下这段CSS:

.thumbImage{
max-width:50px;
max-height:50px;
}
*html.thumbImage{
width:expression(this.width>50&&this.width>this.height?50:auto);
height:expresion(this.height>50?50:auto);
}

时间: 2024-12-11 20:00:37

用CSS同比例缩小图片的相关文章

符合Web标准!CSS同比例缩小图片

css|web|web标准 当然,生成缩略图这个工作如果交给程序来完成,效果会好很多,但是有时出于某种因素,例如服务器不支持GD之类的,难免就要请CSS代劳. 把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可. 对于IE 6.0及以下版本,以上两条CSS属性均不会被理会.之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件.例如: Example Source Code <imgsrc=".

利用CSS同比例缩小图片技巧

当然,生成缩略图这个工作如果交给程序来完成,效果会好很多,但是有时出于某种因素,例如服务器不支持GD之类的,难免就要请CSS代劳. 把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可. 对于IE 6.0及以下版本,以上两条CSS属性均不会被理会.之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件.例如: 这固然能解决问题,但是对以后页面的升级会带来麻烦--随着浏览器对CSS支持的完善,我们迟早会把

网页标准学习:利用CSS同比例缩小图片技巧

css|标准|技巧|网页 当然,生成缩略图这个工作如果交给程序来完成,效果会好很多,但是有时出于某种因素,例如服务器不支持GD之类的,难免就要请CSS代劳. 把一副大图片按比例缩小到某个尺寸,对于现代浏览器,直接使用max-width和max-height两条CSS属性即可. 对于IE 6.0及以下版本,以上两条CSS属性均不会被理会.之前处理这种事情,我们往往会借助Javascript,然后为图片加上onload事件.例如: <imgsrc="..."alt="...

javascript简单实现等比例缩小图片的方法_javascript技巧

本文实例讲述了javascript简单实现等比例缩小图片的方法.分享给大家供大家参考,具体如下: //等比例缩小图片 function changeImg(obj,width,height) { var img = new Image(); img.src = document.getElementById(obj.id).src var ys_w = img.width; var ys_h = img.height; if(ys_w > width || ys_h > height) { v

JS等比例缩小图片尺寸

为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求. 而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度. 又考虑到html页面解析顺序可能导致的一些问题,决定通过定义一个简单的功能函数,然后在img元素中添加onload事件来调用的方式进行实现,代码如下: JS部分 <script type="text/javascript"> function changeImg(objImg) { var most = 690

JS等比例缩小图片尺寸的实例_javascript技巧

为了提升用户体验,网站用户在上传图片的时候,我们不能够让用户自己去处理图片以达到我们的要求. 而通常像淘宝上商品实物展示这样的页面,我们需要控制的主要是图片的宽度. 又考虑到html页面解析顺序可能导致的一些问题,决定通过定义一个简单的功能函数,然后在img元素中添加onload事件来调用的方式进行实现,代码如下: JS部分 复制代码 代码如下: <script type="text/javascript"> function changeImg(objImg) {    

php 等比例缩小图片

 代码如下 复制代码 function imageresize2($width, $height, $targetw, $targeth) {   $percentage = 1;   if (($width > $targetw) || ($height > $targeth))   {  $width_diff = $width - $targetw;  $height_diff = $height - $targeth;    if ($width_diff >= $height_

js 图片比例缩小图片尺寸代码

图片加载中--

css让图片等比例缩小的代码

  随着智能手机的增多,手机网站也可以做的更加个性化,最近在改版自己的手机网站 这其中,遇到了网站图片尺寸问题,手机屏幕都比较小,怎么让上传的规则不一的图片在手机上显示的更加美观呢? 那就利用css的强大功能吧. 先附上代码: img { max-width:500px; myimg:expression(onload=function(){ this.style.width=(this.offsetWidth > 500)?"500px":"auto"} )