相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非,但只要使用以下的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自动控制图片大小的代码

    img { max-width: 800px; height: auto; } 代码中的max-width:800px限制图片的最大宽度为800像素,而下面的hight:auto很关键,可以保证图片有 ...

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

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

  3. CSS控制图片大小

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

  4. css限制图片大小,避免页面撑爆

    /*==========限制图片大小======避免页面撑暴========*/img { max-width:100%;width:expression(width>669?"100 ...

  5. mui-图文列表 图片大小问题

    下面是源码,不能调节图片大小 <ul class="mui-table-view"> <li class="mui-table-view-cell mu ...

  6. 实现图片大小的自动控制( 图片大小控制CSS代码)

    图片大小控制CSS代码 将以下代码放到你的样式表文件中即可实现图片大小的自动控制. /*图片大小控制CSS By Tekin */img,a img{border:0;margin:0;padding ...

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

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

  8. Css Sprite 图片等比缩放图片大小

    图片大小80*40,即每张图片大小40*40,如何以20*20显示图片?1. 首先看下如何以40*40显示第二张图片: 正常显示css代码 .sprite { background-image: ur ...

  9. div css 伪类 不固定图片大小 居中, css div 实现三角形

    div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...

随机推荐

  1. JavaScript AMD 模块加载器原理与实现

    关于前端模块化,玉伯在其博文 前端模块化开发的价值 中有论述,有兴趣的同学可以去阅读一下. 1. 模块加载器 模块加载器目前比较流行的有 Requirejs 和 Seajs.前者遵循 AMD规范,后者 ...

  2. 关于echo `git branch | grep \*`

    本来想返回一个git当前的分支.但会将这个文件夹下的所有目录与分支一起输出. 原因是  echo `git branch | grep \*`  等价于   echo * master  , 而  e ...

  3. [Design Pattern] Service Locator Pattern 简单案例

    Service Locator Pattern,即服务定位模式,用于定位不同的服务.考虑到 InitialContext::lookup 的成本比较高,提供了 Cache 类缓存以定位到的服务. 代码 ...

  4. Robot Framework安装配置 windows

    1.install python https://www.python.org/downloads/release/python-279/ choose "Files" -> ...

  5. ubuntu环境配置

    网络配置 主要文件:/etc/network/interfaces,这里是IP.网关.掩码等的一些配置: # This file describes the network interfaces av ...

  6. java笔记8之选择结构IF

    注意1 A比较表达式无论简单还是复杂,结果必须是boolean类型        B:if语句控制的语句体如果是一条语句,大括号可以省略:          如果是多条语句,就不能省略.建议永远不要省 ...

  7. Linux编程之自定义消息队列

    我这里要讲的并不是IPC中的消息队列,我要讲的是在进程内部实现自定义的消息队列,让各个线程的消息来推动整个进程的运动.进程间的消息队列用于进程与进程之间的通信,而我将要实现的进程内的消息队列是用于有序 ...

  8. python_安装工具easy_install和pip

    前言 用python就必须知道easy_install和pip这两个东西啦 easy_insall提供了在线一键安装模块或包的方便方式,而pip是easy_install的改进版,提供更好的提示信息, ...

  9. EasyUEFI

    ---------------------------------http://www.easyuefi.com/downloads/EasyUEFI_Setup.exe--------------- ...

  10. SQLite3基本使用从shell到python

    SQLite是一个轻量级的关系型数据库,在訪问量不超过10万PV的中小站点中使用绰绰有余. 并且使用方便,接口简单,以下从命令行和python接口双方面介绍SQLite3的基本操作. 在linux终端 ...