相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的CSS语句即可解决。
     该CSS的功能是:大于600的图片自动调整为600显示。

<style type="text/css">
<!--

img {width:expression(this.width>600?"600px":this.width+"px");}
}

-->
</style>

上面的代码在使用的过程中发现第一次打开页面时图片会缩到很小,需要刷新页面才能实达所设置的大小,故又找到了以下代码:

img{
 max-height:720px;
 max-width:640px;
 width:expression(this.width > 640 && this.height < this.width ? 640: true);
 height:expression(this.height > 720 ? 720: true);
 }

测试是可以解决图片自适应大小的问题了。

另一种方法是让图片自适应DIV及table的大小:
先定义一个Java函数

<script type="text/JavaScript" >

function ReImgSize(){
for (j=0;j<document.images.length;j++)
{
document.images[j].width=(document.images[j].width>420)?"420":document.images[j].width;
}
}

</script>

然后在body区域加上onload="ReImgSize()" 就可以了。

顺道说一下:

Mozilla支持一个max-width 的CSS语法。于是我们这样这样定义图片的全局样式。

img{
max-width:100%;height:auto;
}
这样图片就回在div或table内自动适应其大小了

css控制图片自适应大小的更多相关文章

  1. 用CSS控制图片大小显示的方法

    图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢? 可以通过按比例缩小或者放大到某尺寸(自己指定), ...

  2. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  3. FE: CSS固定图片显示大小及GitHub Pages在线演示

    CSS固定图片显示大小 分析 假设图片区域的大小固定为250×300px,那么我们可以写出如下的样式 .picture-area { width: 250px; height: 300px; marg ...

  4. CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见方法 ...

  5. CSS控制图片大小

    转载请注明来源:https://www.cnblogs.com/hookjc/ 1.CSS控制背景图片:    对于一个网页,我们开始设计的时候,可能没有过多的去想背景图到底是什么,因为大多都是设计背 ...

  6. iOS HTML 字符串中的图片 自适应大小

    本文原文地址:http://www.cnblogs.com/qianLL/p/6095988.html 有时候 我们接收数据的时候  后台给的数据室一串HTML 的字符串  但是 我们要显示出来  这 ...

  7. 一行css解决图片统一大小后的拉伸问题(被冷漠的object-fit)

    一.先来个实战 1. 测试案例 需求: 要求表情库里所有表情包大小都固定 实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐.例如: //html <bod ...

  8. CSS控制图片显示区域

    优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...

  9. css 背景图片自适应元素大小

    一.一种比较土的方法,<img>置于底层. 方法如下: CSS代码: HTML: <img src="背景图片路径" /> <span>字在背景 ...

随机推荐

  1. iOS 9的新内容

    https://www.hackingwithswift.com/ios9 Search extensibility Update: I wrote a tutorial on Core Spotli ...

  2. AIX LVM 常用命令记录

    针对物理卷的操作指令 lsdev--列出ODM中的设备 chdev--修改一个AIX设备的属性 mkdev--创建一个AIX设备 chpv--修改物理卷的状态和属性 lspv--查看AIX中物理卷的相 ...

  3. Heritrix源码分析(十五) 各种问题总结(转)

    开博客以及建立Heritrix 群有一段时间了(这里谢谢大家的关注),这篇博客将整理这段时间所遇到的问题.同时由于自己从今年5月份开始就不怎么接触Heritrix,很多东西开始遗忘(不过里面思想没忘) ...

  4. mips-linux-gnu-gcc

    (1) -lz -lrt -lm -lc都是什么库 libzlibrtlibmlibc然后google之压缩库(Z)实时库(real time)数学库(math)标准C库(C lib) 可以进入/li ...

  5. 【转】bzero, memset ,setmem 区别

    原文网址:http://blog.csdn.net/agathe/article/details/6066157 bzero  原型: extern void bzero(void *s, int n ...

  6. 【转】IOS --- OC与Swift混编

    群里大神发的网址,感觉有用就先收录了,暂时没时间看SWIFT,感觉代码简洁,但是可阅读性不是太高,有些代码让系统去判断类型,同样的,我们看代码的时候也得自己去判断类型,或许看多就习惯了,有时间再说吧, ...

  7. 使用C#代码发起K2 Blackpearl流程

    转:http://www.cnblogs.com/dannyli/archive/2011/08/02/2125285.html 使用C#代码,发起一个K2的流程,其形式和链接SQL Server数据 ...

  8. php的header()大全

    <?php /*** Function: PHP header() examples (PHP) ** Desc: Some examples on how to use the header( ...

  9. 微信公众平台开发localStorage数据总是被清空

    我把现在项目中的用户数据存储过程改成本地的,只用localStorage,但是随之而来很多问题,原因就是localStorage只有很短的有效时间,退出公众号,关闭微信都会清空.最不能容忍的是用户还在 ...

  10. HDU5800 To My Girlfriend 背包计数dp

    分析:首先定义状态dp[i][j][s1][s2]代表前i个物品中,选若干个物品,总价值为j 其中s1个物品时必选,s2物品必不选的方案数 那么转移的时候可以考虑,第i个物品是可选可可不选的 dp[i ...