鱼叉标志是什么车:如何限制页面中图片的大小 at catch the digital flow | 北极冰仔...

来源：百度文库 编辑：九乡新闻网 时间：2024/05/04 14:13:59

如何限制页面中图片的大小

Oct 6th, 2007 |  网页设计 Add a Comment  

相关的日志

  • 用 JavaScript 实现鼠标悬停时展开的菜单
  • 使用DOM折叠网页上的元素
  • 使用 document.write 输出 script 块
  • DOM 加载事件：addDOMLoadEvent
  • CSS Sprites 生成器
  • JavaScript 的函数也是变量

由于更换了新的主题，页面正文的宽度从 540px 缩到了 520px，导致原先一些日志中宽度大于 520px 的图片会把页面撑破，侧边栏掉到正文底下去，页面布局乱得不堪入目。因此，需要让这些超过限制宽度的图片自动缩小以适应当前页面，我摸索了一些方法，写出来抛抛砖。

Firefox 的解决办法

只需要修改 CSS 样式表的一行代码，给正文中的 img 加上 max-width 属性：

#content img{max-width:520px;}

max-width 属性会自动将正文中超过限宽的图片成比例地缩小到 520px 宽度，方便快捷，在 Firefox 2 浏览器中测试通过。我没有 Opera、Safari，但它们应该是支持 max-width 属性的，听说 IE7 （可能）也支持该属性，反正 IE6 是不行的，所以还得为 IE6 想专门的办法。

IE6 的解决办法

1. 使用带有表达式的 CSS 样式

#content img{max-width:520px;width:expression(document.body.clientWidth> 520? "520px": "auto" );}

这个方法看上去似乎是可以的，但我在测试时发现，宽度超过 520px 的图片的确已经缩小，但是后面出现的小图片的宽度被放大到了 520px。我认为可能是页面中一旦有图片宽度超过 520px，width 属性的值就会固定为 520px，导致出现刚才说的问题。这个方法出自这里，大家研究一下，看是不是我用错了。

2. 使用 JavaScript 调整
其实最初我就想到 JavaScript，但脚本只能在页面装载完成之后执行，网络状况不太好的话，需要加载很长一段时间才能轮到脚本执行，用户体验较差；另外，如果用户关闭了浏览器的 JavaScript 支持，这个方法也就失效了。

 

总结

一句话，希望 IE6 早日被淘汰！

如何限制页面中图片的大小 at catch the digital flow | 北极冰仔... go with the flow the-digital-picture.com的人像头推荐 Catch the star holds your destiny 在空间日志里如何调整图片的大小 如何在IE浏览器中限制某些网页的浏览? 如何在IE浏览器中限制某些网页的浏览? 系统虚拟内存不足,增加虚拟内存页面文件的大小. at the AIPAC Policy ... Waiting at the Door 博客装修23：如何在页面两侧添加浮动对联 如何在文章中文字环绕图片 洛克的墓：?Joseph?F.?Rock?at?the?RIGHT?corner! catch的短语与句式 A digital rallying cry | The Economist The Digital Revolution and Higher Education(1) The Digital Revolution and Higher Education (2) The Digital Revolution and Higher Education (3) The Digital Revolution and Higher Education (4) The Digital Revolution and Higher Education (5) The Digital Revolution and Higher Education (6) QQ空间签名档图片突破限制大小并可以放2张 Digital publishing sparks debate at Chicago Story Week 如何限制局域网的网速 At the Department Store (2)