09-06
19
19
js+css实现图片自适应大小
作者：mzoe 日期：2009-06-19 时间：10:34
收缩
有时候经常会出现一些图片把页面撑大的情况，一个个手动去指定大小的确太费事了，其实使用一段很简单的js代码就可以让它去自适应大小了，js代码如下：
- function resize(e) {
- if (!e) return;
- for (var i = 0; i < e.length; i++) {
- var imgElements = e[i].getElementsByTagName('img');
- for (var k = 0; k < imgElements.length; k++) {
- if (imgElements[k].width > 500) {
- imgElements[k].className = 'resize500';
- }
- }
- }
- }
注意，里面给每个宽度大于500px的图片添加了一个样式“resize500”，主要是为了方便操作，只需要在css样式文件把resize500设置一下对应的属性就可以实行等比例缩放了：
- img.resize500 { width:500px;}
而且，还可以根据你的页面情况，设置这些图片的现实效果，比如居中，或者给图片加个滚动条等等，这样比单纯的使用js来实现要灵活得多。