div下图片自适应解决方法

　div下图片自适应解决方法

作者：remain　时间： 2006-03-21　文档类型：原创　来自：蓝色理想

第 1 页 div下图片自适应解决方法
第 2 页 CSS中expression使用简介

我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的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">  </style> </head> <body> <div id="pic"> <img src="/articleimg/2006/03/3297/koreaad_10020.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">  </style> </head> <body> <div id="pic"> <img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片！"/> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

提醒:

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

出处：蓝色理想
责任编辑：moby

上一页下一页 CSS中expression使用简介

◎进入论坛网站综合、网页制作版块参加讨论

相关文章

更多相关链接

如何用CSS定义表格与模拟表格

[css]IE5/IE5.5/IE6/FF兼容性

经典的图片切换效果

新颖实用的显示图片效果

xml css htc 的综合运用

站点最新

站点最新列表

HTC Sense 体验与体验背后的故事

我希望能再"大气"一些

通过shtml实现重构页面模块化构建

如何设计新手用户引导

27个超漂亮的信息图表

商业产品色彩体系

Treehouse融资60万美元

Solve Media用广告代替验证码

互联网产品"冷启动"问题浅析

用户体验的价值

栏目最新

栏目最新列表

浅谈JavaScript编程语言的编码规范

如何在illustrator中绘制台历

Ps简单绘制一个可爱的铅笔图标

数据同步算法研究

用ps作简单的作品展示页面

CSS定位机制之一:普通流

25个最佳最闪亮的Eclipse开发项目

Illustrator中制作针线缝制文字效果

Photoshop制作印刷凹凸字体

VS2010中创建自定义SQL Rule