前两天在给公司制作华丹官网网页时，遇到图片在电脑端显示正常，在移动端图片将页面撑开，无法做到自适应布局的情况。这时就需要对图片进行自适应缩放。

缩放的方式有两种，一种是通过css进行缩放，一种是通过JavaScript进行缩放，接下来分别介绍两种缩放的方式：

1、css方式：主要途径是通过@media,区别不同的屏幕宽度，添加不同的css样式，具体代码如下：

@media only screen (max-width : 768px) {

.img_01 {width: 90%;}

}

代码解释；

@media only screen (max-width : 768px){...} ,判断当前容器小于等于768px（基本上对应移动端），就执行{}内的css

.img_01 {width: 90%;},对class含有img_01的元素进行css样式设置或附加。

2、JavaScript方式：通过JavaScript代码获取当前容器的宽度高度，再根据获取到的图片对象再进行算法处理。具体代码如下

<script>

$(function () {

//获取图片对象

var imglist = document.getElementsByName("context_img");

var _width;

doDraw();

window.onresize = function () {

//捕捉屏幕窗口变化，始终保证图片根据屏幕宽度合理显示

doDraw();

}

function doDraw() {

//window.innerWidth 为当前屏幕的宽度

//100为图片两边到屏幕边缘的空白距离，可根据实际情况进行调节

_width = window.innerWidth-100;

for (var i = 0, len = imglist.length; i < len; i++) {

DrawImage(imglist[i], _width);

}

}

function DrawImage(ImgD, _width) {

var image = new Image();

image.src = ImgD.src;

image.onload = function () {

//限制，只对宽高都大于30的图片做显示处理，换成你想要的宽度。

if (image.width > 30 && image.height<30) {

if (image.width > _width) {

ImgD.style.width = "";

ImgD.style.height = "";

ImgD.width = _width;

// 高度按比例缩小

ImgD.height = (image.height * _width) / image.width;

} else {

ImgD.style.width = "";

ImgD.style.height = "";

ImgD.width = image.width;

ImgD.height = image.height;

}

}

}

}

})

</script>

上面就是两种方法的具体处理方式，总结一下优缺点：

css方式：

优点：

1）代码简单。

2）可以针对不同的容器大小进行固定处理。

3）当页面中相同大小图片元素比较多的时候，效率高。

缺点：

1）只能固定化处理，对于多种大小要求的图片，需要写很多css，维护较麻烦。

2）浏览器存在兼容问题，版本过低的浏览器不支持。

JavaScript方式：

优点：

1）可自动适应屏幕，较为方便。

2）浏览器兼容良好。

3）能够同时不同大小的图片进行同比缩放，无需再写代码。

4）每个图片元素无需写独有的css样式或其他标志属性。

缺点：

1）图片过多，会导致页面加载有一定的延时。

2）对于多个图片元素在一行上的情况不适合使用。