联系我们 | 加入收藏
 
 
公司业务 | more>>>
成功案例 | more>>>
客户服务 | more>>>
联系我们 | more>>>
 
cssxhtml
网页配色
网页布局
网页技巧
网页特效
 
网站首页 > 网站学习 > 网站设计 > cssxhtml >

DIV下图片自适应解决方法

时间:2007-09-11  点击:   
以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。 关键在于:max-width:780px;以及下面那行。 固定像素适应: 以下是引用片段: !DOCTYPE html PUBLIC

以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。

关键在于: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: 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>document.getElementById("pic").scrollWidth*9/10? "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>




 
  济宁金瑞软件公司专业从事 工资查询系统,软件开发,网站建设,网页制作,网站推广软件,济宁财务软件,济宁用友软件,济宁OA软件 等服务 | TAG标签
Copyright 2005-2015 济宁金瑞软件有限公司     中华人民共和国信息产业部网站备案号 鲁ICP备06007949号-1