定制网站
智慧网站
外贸独立站
新零售社交电商系统
微网站
企业微信开发
h5营销
公众号开发
小程序定制
新零售商城小程序
积分小程序
智慧小程序
定制AI应用开发
AI客服智能体
营销智能体
销售智能体
智慧园区
物流TMS管理系统
企业资产管理系统
安全生产信息化管理
GEO优化
SEO优化
新媒体
短视频
出海社媒运营
域名注册
企业邮箱
云服务器
维护运营
SSL证书
等保服务
云OA系统
CRM开发
品牌网站解决方案
集团公司解决方案
商城网站解决方案
在线教育解决方案
新零售商城系统
基础商城小程序
企业积分福利商城
智慧园区
物流MES系统
物业合同管理
4008-520-635
div下图片自适应解决方法
- 2017-07-17 11:11:38
- 4783
核心提示：
我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的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;
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > 780)?"780px":"auto"}
);
border:1px dashed #000;
}
-->
</style>
</head>
<body>
<div id="pic">
<img src="http://desk.blueidea.com/DESK/NX100/koreaad_10/koreaad_10020.JPG" alt="感谢blueidea被我盗链图片！"/><br/>
<img src="http://www.blueidea.com/img/common/logo.gif
" 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%;
mywidth:expression(onload=function(){
this.style.width=(this.offsetWidth >document.getElementById("pic").scrollWidth*8/10)? "80%": "auto" });
border:1px dashed #000;
}
-->
</style>
</head>
<body>
<div id="pic">
<h3>缩放窗口大小试试</h3>
<img src="http://desk.blueidea.com/DESK/NX100/koreaad_10/koreaad_10020.JPG" alt="感谢blueidea被我盗链图片！"/>
<img src="http://www.blueidea.com/img/common/logo.gif
" alt="感谢blueidea被我盗链图片！"/> </div>
</body>
</html>
-
咨询
-
公众号