东莞制作公司网站,会展网站代码源码,备案期间网站怎么关闭,企业信用信息公示平台我们#xff08;特别是像我一样的菜鸟#xff09;经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区#xff0c;在论坛#xff0c;可以这么说#xff1a;哪儿需要上传图片#xff0c;哪儿就存在这个问题#xff0c;而论坛上也不时有人询问。为什么#… 我们特别是像我一样的菜鸟经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区在论坛可以这么说哪儿需要上传图片哪儿就存在这个问题而论坛上也不时有人询问。为什么原因很简单我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的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 xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetgb2312 / titlecss2.0 VS ie/title style typetext/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 idpic img src/articleimg/2006/03/3297/koreaad_10020.jpg alt感谢blueidea被我盗链图片/ /div /body /html[CtrlA 全部选择 提示你可先修改部分代码再按运行]百分比适应:运行代码框!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetgb2312 / titlecss2.0 VS ie/title style typetext/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.clientWidthdocument.getElementById(pic).scrollWidth*8/10? 80%: auto ); border:1px dashed #000; } -- /style /head body div idpic img src/articleimg/2006/03/3297/koreaad_10020.jpg alt感谢blueidea被我盗链图片/ /div /body /html[CtrlA 全部选择 提示你可先修改部分代码再按运行]提醒:1 该方法不只是用于img;2 max-width,max-height,min-width,min-height.CSS中expression使用简介作者dozb定义IE5及其以后版本支持在CSS中使用expression用来把CSS属性和Javascript表达式关联起来这里的CSS属性可以是元素固有的属性也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式CSS属性的值等于Javascript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。给元素固有属性赋值例如你可以依照浏览器的大小来安置一个元素的位置。#myDiv {position: absolute;width: 100px;height: 100px;left: expression(document.body.offsetWidth - 110 px);top: expression(document.body.offsetHeight - 110 px);background: red;}给元素自定义属性赋值例如消除页面上的链接虚线框。通常的做法是a hreflink1.htm οnfοcusthis.blur()link1/aa hreflink2.htm οnfοcusthis.blur()link2/aa hreflink3.htm οnfοcusthis.blur()link3/a粗看或许还体现不出采用expression的优势但如果你的页面上有几十甚至上百个链接这时的你难道还会机械式地CtrlCCtrlV么何况两者一比较哪个产生的冗余代码更多呢采用expression的做法如下 style typetext/cssa {star : expression(οnfοcusthis.blur)}/stylea hreflink1.htmlink1/aa hreflink2.htmlink2/aa hreflink3.htmlink3/a说明里面的star就是自己任意定义的属性你可以随自己喜好另外定义接着包含在expression()里的语句就是JS脚本在自定义属性与 expression之间可别忘了还有一个引号因为实质还是CSS所以放在style标签内而非script内。OK这样就很容易地用一句话实现了页面中的链接虚线框的消除。不过你先别得意如果触发的特效是CSS的属性变化那么出来的结果会跟你的本意有差别。例如你想随鼠标的移进移出而改变页面中的文本框颜色更改你可能想当然的会认为应该写为/* 原文有乱码,没时间修正,抱歉!*/可结果却是出现脚本出错正确的写法应该把CSS样式的定义写进函数内如下所示style typetext/cssinput {star : expression(οnmοuseοverfunction(){this.style.backgroundColor#FF0000},οnmοuseοutfunction(){this.style.backgroundColor#FFFFFF}) }/styleinput typetextinput typetextinput typetext注意:不是非常需要一般不建议使用expression因为expression对浏览器资源要求比较高 转载于:https://www.cnblogs.com/top5/archive/2011/10/05/2199561.html
