div下图片自适应解决方法_css

我们（特别是像我一样的菜鸟）经常会遇到一个问题――图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的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” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/x" rel="nofollow">http://www.w3.org/TR/x</a><a href="https://www.gaodaima.com/tag/html" title="查看更多关于html的文章" target="_blank">html</a>1/DTD/xhtml1-transitional.dtd”><html xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head><meta" rel="nofollow">http://www.w3.org/1999/xhtml”><head><meta</a> http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><title>css2.0 VS ie</title><style type=”text/<a href="https://www.gaodaima.com/tag/css" title="查看更多关于css的文章" target="_blank">css</a>“><!–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=”/UploadPic/2007-7/20077721233741.jpg” alt=”感谢blueidea被我盗链图片！”/></div></body></html>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code) type=button value=另存代码> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] </p> <p><span><strong>百分比适应:</strong></span></p> <p><span>运行代码框</span></p> <p><span></p> <p align=center><textarea rows=12 cols=78><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html" rel="nofollow">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html</a> xmlns=”<a href="https://www.gaodaima.com/go.html?url=http://www.w3.org/1999/xhtml”><head><meta" rel="nofollow">http://www.w3.org/1999/xhtml”><head><meta</a> 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=”/UploadPic/2007-7/20077721233741.jpg” alt=”感谢blueidea被我盗链图片！”/></div></body></html>[/code]</p> <p><input style="CURSOR: hand" onfocus=this.blur() type=button value=运行代码> <input style="WIDTH: 95px; CURSOR: hand" onfocus=this.blur() onclick=cycode(code1) type=button value=复制到剪贴板 name=Submit> <input style="CURSOR: hand" onfocus=this.blur() onclick=svcode(code1) type=button value=另存代码> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] </p> <p><span><span><strong><font color=#ff0000>提醒:</font></strong></span></span></p> <p><span><span>1 该方法不只是用于img;<br />2 max-width,max-height,min-width,min-height.</span></span></p> <p><span><span></p> <p><strong>CSS中expression使用简介<br /></strong><strong>作者：dozb</strong></p> <p><strong>定义</strong></p> <p>IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/javascript" title="JavaScript" rel="nofollow" target="_blank">JavaScript</a>表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/java" title="java" rel="nofollow" target="_blank">java</a>script表达式，CSS属性的值等于Javascript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。</p> <p><strong>给元素固有属性赋值</strong></p> <p>例如，你可以依照浏览器的大小来安置一个元素的位置。</p> <p><span>#myDiv {<br />position: absolute;<br />width: 100px;<br />height: 100px;<br />left: expression(document.body.offsetWidth – 110 + “px”);<br />top: expression(document.body.offsetHeight – 110 + “px”);<br />background: red;<br />}</span></p> <p><strong>给元素自定义属性赋值</strong></p> <p>例如，消除页面上的链接虚线框。 </p> <p>通常的做法是：</p> <p><span><a href=”link1.htm” >link1</a><br /><a href=”link2.htm” >link2</a><br /><a href=”link3.htm” >link3</a> </span></p> <p>粗看或许还体现不出采用expression的优势，但如果你的页面上有几十甚至上百个链接，这时的你难道还会机械式地Ctrl+C，Ctrl+V么，何况两者一比较，哪个产生的冗余代码更多呢？</p> <p><strong>采用expression的做法如下：</strong> 　</p> <p><span><style type=”text/css”><br />a {star : expression(onfocus=this.blur)}<br /></style><br /><a href=”link1.htm”>link1</a><br /><a href=”link2.htm”>link2</a><br /><a href=”link3.htm”>link3</a></span></p> <p><strong>说明：</strong></p> <p>里面的star就是自己任意定义的属性，你可以随自己喜好另外定义，接着包含在expression()里的语句就是JS脚本，在自定义属性与expression之间可别忘了还有一个引号，因为实质还是CSS，所以放在style标签内，而非script内。OK，这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意，如果触发的特效是CSS的属性变化，那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改，你可能想当然的会认为应该写为 <br />/* 原文有乱码,没时间修正,抱歉!*/<br />可结果却是出现脚本出错，正确的写法应该把CSS样式的定义写进函数内，如下所示：</p> <p><span><style type=”text/css”><br />input {star : expression(onmouseover=function()<br />{this.style.backgroundColor=”#FF0000″},<br />onmouseout=function(){this.style.backgroundColor=”#FFFFFF”}) }<br /></style><br /><input type=”text”><br /><input type=”text”><br /><input type=”text”></span></p><div><div class="_t33rkthes8f"></div><script type="text/javascript">(window.slotbydup = window.slotbydup || []).push({id: "u6795179",container: "_t33rkthes8f",async: true});</script></div> <p><strong><font color=#ff0000>注意:</font></strong></p> <p>不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高</p> <p></span></span></span> </p> <p>欢迎大家阅读<span style='color:red;'>《div下图片自适应解决方法_css》</span>,跪求各位点评,若觉得好的话请收藏本文，by <strong>搞代码</strong></p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com‍</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/22477.html" target="_blank" title="div下图片自适应解决方法_css">div下图片自适应解决方法_css</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> </p> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="22477" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> <div class="article-tags"><i class="fa fa-tags"></i><a href="https://www.gaodaima.com/tag/css" rel="tag">css</a><a href="https://www.gaodaima.com/tag/html" rel="tag">html</a><a href="https://www.gaodaima.com/tag/java" rel="tag">java</a><a href="https://www.gaodaima.com/tag/javascript" rel="tag">JavaScript</a><a href="https://www.gaodaima.com/tag/js" rel="tag">js</a></div></footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/432440.html" title="java怎么样学java正确" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/8.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="java怎么样学java正确" /><br><span class="r_title">java怎么样学java正确</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432401.html" title="Java面试题（11）" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/12.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java面试题（11）" /><br><span class="r_title">Java面试题（11）</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432366.html" title="软件构造 03 正则表达式" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/1.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="软件构造 03 正则表达式" /><br><span class="r_title">软件构造 03 正则表达式</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432360.html" title="类和对象的概念与类和对象的关系" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/9.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="类和对象的概念与类和对象的关系" /><br><span class="r_title">类和对象的概念与类和对象的关系</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432359.html">面向对象思想概述、类和对象概念、类和对象的关系</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432357.html">4.15软工学习周报</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432314.html">Java面向对象下笔记&1000以内素数</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432291.html">学习Java应该留意的问题</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432250.html">Java集合框架(四)-HashMap</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432246.html">java学习</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432243.html">Java 入门与进阶P-7.1+P-7.2</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/432233.html">Java方法</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};">

评论通知

表情贴图加粗删除线居中斜体签到

Hi，您需要填写昵称和邮箱！