很多网站新闻或图片展示页面的图片很大,会把网站的整体结构破坏,使得页面非常难看,我们在看国内大型购物网站或国外一些知名购物网站时不管上传者上传多大的图片都能自适应,有的可能是在上传图片时就进行了有效处理,比如把图片按比例处理成多大的,这里我们说一种JQUERY的方法,可以直接让上传者的图片在我们想要的大小以内,免得很难看!
网上有很多种方法,但都不太适用,比如说让图片宽度固定,高度自适应,这在一定情况下是可以的,但是我们在新闻中你不知道什么情况下会有图片怎么办呢?难道叫网络维护人员上传图片时看代码然后加上width属性吗?这个不太现实!还有一种说用CSS的办法,img{max-width:700px;width:expression(this.width>700?"700px":this.width)},我觉得这种也不靠谱,首先笔者试过是行不通的,其次这个CSS真有效果吗,还是在每个浏览器下都适用呢?最好的办法是我要说的用CSS和JQUERY的方法:
先看CSS:
#autoimg { width:690px; padding:5px; margin-top:20px; overflow:hidden; border:1px solid #fff; } #autoimg .content p { padding: 0 8px; } #autoimg .content img { border:0 none; }
网页代码:
<div id="autoimg"> <p><a href="http://www.ywxly.com/manage/student/pic/1363250695w-4fb7229898bff.jpg" target="_blank"><img src="http://www.ywxly.com/manage/student/pic/1363250695w-4fb7229898bff.jpg" /></a></p> </div>
看下CSS和网页的代码都非常的简洁和明了,更重要的是这种方法基本适应所有的浏览器,不用担心兼容问题。JQUERY源文件有需要的朋友可联系我eobo@qq.com 。在此不进行上传下载!
本文地址:http://www.eobo.cn/news/453.html
|