我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量。

以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。本人仅在ie6.0,ff1.5, opera7.0于winXP下测试通过，希望通过此篇文章抛砖引玉，望更多高手指点。关键在于：max-width:780px;以及下面那行。

固定像素适应:

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css2.0 VS ie</title> <style type="text/css"> <!-- body { font-size: 12px; text-align: center; margin: 0px; padding: 0px; } #pic{ margin:0 auto; width:800px; padding:0; border:1px solid #333; } #pic img{ max-width:780px; width:(document.body.clientWidth > 780? "780px": "auto" ); border:1px dashed #000; } --> </style> </head> <body> <div id="pic"> <img src="http://edu.han123.net/UploadFiles_edu/200701/20070115190431983.jpg" alt="感谢blueidea被我盗链图片！"/> </div> </body> </html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

百分比适应:

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>css2.0 VS ie</title> <style type="text/css"> <!-- body { font-size: 12px; text-align: center; margin: 0; padding: 0; } #pic{ margin:0 auto; width:90%; padding:0; border:1px solid #333; } #pic img{ max-width:80%; width:(document.body.clientWidth>document.getElementById("pic").scrollWidth*8/10? "80%": "auto" ); border:1px dashed #000; } --> </style> </head> <body> <div id="pic"> <img src="http://edu.han123.net/UploadFiles_edu/200701/20070115190431983.jpg" alt="感谢blueidea被我盗链图片！"/> </div> </body> </html>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

提醒:

1 该方法不只是用于img; 2 max-width,max-height,min-width,min-height.

CSS中expression使用简介 作者：dozb

定义

IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式，CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

给元素固有属性赋值

例如，你可以依照浏览器的大小来安置一个元素的位置。

#myDiv { position: absolute; width: 100px; height: 100px; left: expression(document.body.offsetWidth - 110 + "px"); top: expression(document.body.offsetHeight - 110 + "px"); background: red; }

给元素自定义属性赋值

例如，消除页面上的链接虚线框。

通常的做法是：

<a href="link1.htm" onfocus="this.blur()">link1</a> <a href="link2.htm" onfocus="this.blur()">link2</a> <a href="link3.htm" onfocus="this.blur()">link3</a>

粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？

采用expression的做法如下： 　

<style type="text/css"> a {star : expression(onfocus=this.blur)} </style> <a href="link1.htm">link1</a> <a href="link2.htm">link2</a> <a href="link3.htm">link3</a>

说明：

里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与 expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为 /* 原文有乱码,没时间修正,抱歉!*/ 可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：

<style type="text/css"> input {star : expression(onmouseover=function() {this.style.backgroundColor="#FF0000"}, onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) } </style> <input type="text"> <input type="text"> <input type="text">

注意:

不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高

css控制div下图片自适应解决方法:图片不超过最大宽度的更多相关文章

  1. 用CSS控制DIV居中失效的解决方法

    1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  2. 简单两步使用css控制div下导航栏ul居中显示

    第一步:父层设置文本居中属性 ul{ text-align:center; } 第二步:li设置内联样式 li{ display:inline; } PS 只需以上两步就可以实现导航栏居中显示了,但为 ...

  3. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. dedecms织梦手机端文章内容页图片不能自适应解决方法

    dedecms织梦手机端文章内容页图片不能自适应解决方法: 方法一修改手机端文章页模板代码: 找到并打开手机端的文章内容页模板,将里面的{dede:field.body/}标签修改一下,改为如下的标签 ...

  5. PNG24在ie6下的完美解决方法!(DD_belatedPNG)

    原网址:http://www.zjgsq.com/1629.html 之前写过一篇<js+css滤镜设置解决PNG24在IE6下显示问题> 解决方法不是很完美,使用起来也比较麻烦. DD_ ...

  6. css控制div的各种形状

    css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...

  7. 使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法

    问题:使用webstrom开发react-native时react-native代码会出现红色下划线的解决方法 解决方法:webstrom ->preferences->Laugrange ...

  8. 纯CSS实现Div高度根据自适应宽度（百分百调整）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. ArcGIS帮助文档VS帮助文档不能复制图片的解决方法

    ArcGIS帮助文档VS帮助文档不能复制图片的解决方法(非常有用)   问题:ArcGIS的学习文档,开发文档,vs的帮助文档,一般都不能复制图片,有的甚至不能复制文本.   解决方法 在文档空白处右 ...

随机推荐

  1. 用“倍增法”求最近公共祖先（LCA)

    1.最近公共祖先:对于有根树T的两个结点u.v,最近公共祖先LCA(T,u,v)表示一个结点x,满足x是u.的祖先且x的深度尽可能大. 2.朴素算法:记录下每个节点的父亲,使节点u,v一步一步地向上找 ...

  2. LeetCode——Longest Consecutive Sequence

    LeetCode--Longest Consecutive Sequence Question Given an unsorted array of integers, find the length ...

  3. 深入理解MR1与MR2的执行流程

    摘自:Tom White ,<Hadoop.The.Definitive.Guide.3rd.Edition> MR1 MR2

  4. JS Object To C# ASP.Net ModelBind

    之前做项目的时候发现,Jquery自带的Form 序列化函数.与asp.net 里边的Modelbinding格式不匹配,所以写了一个可以把前端的Object对象序列化成ModelBinding认识的 ...

  5. Android -- 创建XML文件对象及其序列化， pull解析XML文件

    1. 创建XML文件对象及其序列化 示例代码:(模拟以xml格式备份短信到SD卡) SmsInfo.java, bean对象 /** * 短信的业务bean * @author Administrat ...

  6. Hibernate -- 配置c3p0连接池, 事务隔离级别, 管理session

    知识点1:配置c3p0连接池(了解) * 引入c3p0-0.9.1.jar * 在hibernate.cfg.xml文件中增加如下配置 <!-- C3P0连接池设定--> <!-- ...

  7. windows查看端口占用、结束进程

    在开发中难免会遇到windows的端口被占用,现在我们来查看端口的占用和结束占用端口的进程. win+r 输入cmd进入命令提示符: 比如我们要查看8080端口的占用情况,输入netstat -aon ...

  8. linux 安装unrar

    Centos 6 32位下安装 wget http://pkgs.repoforge.org/unrar/unrar-4.2.3-1.el6.rf.i686.rpmrpm -ivh unrar-4.2 ...

  9. servlet的补充

    1 request client获得请求. response 设置client响应2 text/html13123 不明确的响应用下载处理.3 MIME类型不明确在w3shool4 两种写utf-8的 ...

  10. redis memcache rabbitMQ

    Python之路[第九篇]:Python操作 RabbitMQ.Redis.Memcache.SQLAlchemy Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动 ...