# div下图片自适应解决方法
- Link: https://yjyj.net/css/552.html
- Published: 2008-08-25T15:36:17+08:00
- Author: 小 虾
⚡ 生猛大蝦编辑部 · 30 秒核心看点
* 核心思路是给图片设max-width，再用expression补IE兼容。
* 固定宽度容器和百分比容器都能做，关键是限制图片最大显示宽度。
* 作者实测覆盖IE6、Firefox1.5、Opera7，结论是CSS方案比JS更省事。
我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。
在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不
时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片
或者了解最基本的html代码——尽管这并没有多少技术含量。
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部
容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
下面的办法的出现
应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。本人
仅在ie6.0,ff1.5,opera7.0于winXP下测试通过，希望通过此篇文章抛砖引玉，望更多高手指点。
关键在于：max-width:780px;以及下面那行。
**固定像素适应:**
|
css2.0 VS ie
|
**百分比适应:**
|
css2.0 VS ie
|
**提醒:**
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;}
**给元素自定义属性赋值**
例如，消除页面上的链接虚线框。
通常的做法是：
link1
link2link3
粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时
的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？
**采用expression的做法如下：**
link1link2link3
**说明：**
里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()
里的语句就是JS脚本，在自定义属性与expression之间可别忘了还有一个引号，因为实质还是
CSS，所以放在style标签内，而非script内。OK，这样就很容易地用一句话实现了页面中的
链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会
跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想
当然的会认为应该写为
/* 原文有乱码,没时间修正,抱歉!*/可结果却是出现脚本出错，正确
的写法应该把CSS样式的定义写进函数内，如下所示：
**注意:**
不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高
from:[http://www.blueidea.com/tech/site/2006/3297_2.asp](http://www.blueidea.com/tech/site/2006/3297_2.asp)
❓ 延伸问答与排错指南（FAQ）
div里图片超宽怎么自动缩放？
做法是给图片本身加最大宽度限制，例如设置max-width，并在老旧IE里用expression补足兼容。
这样图片会在容器内按比例缩小，不会把版面撑坏，也比用JS处理更简单。
百分比布局下图片自适应怎么写？
思路是先确定外层容器宽度，再给图片设置不超过容器可用宽度的最大值。文章示例里用max-
width配合基于容器宽度的判断，让图片在百分比容器中也能保持自适应显示。
为什么不用overflow:hidden来处理图片？
overflow:hidden只能把超出的部分裁掉，不能让图片真正按容器缩放。文章更推荐CSS自适应
方案，因为它能保留图片完整内容，同时减少手写JS和额外维护成本。
📚 【[前端杂烩](https://yjyj.net/category/css)】专栏延伸阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：
* [样式的优先原则](https://yjyj.net/css/525.html)
* [学习收集-关于用CSS控制输入框input悬停交互样式](https://yjyj.net/css/492.html)
* [根据时段自动切换CSS风格](https://yjyj.net/css/986.html)
* [透明PNG背景图片CSS设置](https://yjyj.net/learn/990.html)
* 热门必读[俩月了, DMIT 终于补货了!](https://yjyj.net/share/7795.html)
* 热门必读[跨境电商 AI Prompts](https://yjyj.net/ad/7723.html)
