---
title: "div下图片自适应解决方法"
url: "https://yjyj.net/css/552.html"
author: "小 虾 (生猛大蝦编辑部)"
published_at: "2008-08-25T15:36:17+08:00"
updated_at: "2008-08-25T15:37:51+08:00"
categories: "前端杂烩"
tags: "CSS布局技巧, Docker容器, JavaScript交互, 前端开发实战, 网页视觉设计"
summary: "这篇老牌前端实战文专治“div里图片太大撑爆版面”的老问题，讲清楚如何用CSS的max-width配合IE时代的expression实现图片自适应。文章还对比了固定像素与百分比两种写法，适合做文章区、论坛贴图的兼容性处理。"
source: "生猛大蝦 (https://yjyj.net)"
---
# div下图片自适应解决方法
> 来源：[生猛大蝦 (yjyj.net)](https://yjyj.net/css/552.html) · 作者：小 虾 · 发布时间：2008-08-25
## 30 秒核心看点 (TL;DR)
- 核心思路是给图片设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
link2
link3 粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？ **采用expression的做法如下：**
link1
link2
link3 **说明：** 里面的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和额外维护成本。
---
更多 Linux 运维、WordPress 性能优化、前端工程化、Shopify 独立站与极客折腾指南：[生猛大蝦全站文章归档 (https://yjyj.net/archive)](https://yjyj.net/archive)
