精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站设计>css教程>正文

网页标准DIV+CSS下的图片自适应解决方案


来源:网络 时间:07-05-02 点击: 点击这里收藏本文
我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问。为什么?原因很简单,我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的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:expression(document.body.clientWidth > 780? "780px": "auto" ); border:1px dashed #000; }
-->
</style>
</head>
<body>
<div id="pic">
<img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片!"/> </div>
</body>
</html>


百分比适应:
<!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:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*8/10? "80%": "auto" ); border:1px dashed #000; }
-->
</style>
</head>

<body>
<div id="pic"> <img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片!"/> </div>
</body>
</html>

提醒:

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

CSS中expression使用简介
作者:dozb

定义

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

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.