【前端】js实现图片自适应

2023-12-27 19:17| 来源: 网络整理| 查看: 265

前言：

前几天写第一版代码的时候，测试跟我说，你这用户上传图片显示有问题啊，图像不是被拉宽就是被拉长了，不行啊。因为我给el-image设计的是固定长宽，如果图片不是这个比例，那直接就会变形了，如图

秒变鬼片有没有

后来我给图片固定了宽，长度为auto，这样一部分图片是没问题了，但是本来没有那么宽的图片又被强行拉宽了，也不行！

我还不信了，最终用一个js方法实现了图片的自适应，无论什么格式的图片，显示其比例都不会出错。

前言：

一、问题分析

二、算法

三、具体实现

四、其他问题

（1）如何获取图片长宽？

（2）如何利用js改变样式

一、问题分析

既然要实现图片自适应，那就要对不同的图片尺寸进行分类处理，我最开始是分了5类

对于长宽都不超过的情况 -- 应该不改变图片本身比例

对于长宽都超过的情况 -- 应该是根据图片比例进行缩小，这样才不会扭曲图片，因此同样存在两种情况

二、算法 // img.height -- 图片高度 img.weight -- 图片宽度 // changeHeight -- 压缩后高度 changeWidth -- 压缩后宽度 // 180 -- 显示器高度 360 -- 显示器宽度 if (img.height > 180 && img.width > 360) { if (img.height / img.width > 0.5) { // 第四种情况 } else { // 第五种情况 } } else if (img.height > 180 && img.width 180 || img.width >360){ if(img.height *2 >img.width){ changeHeight.value = '180px' changeWidth.value = (img.width * 180) / img.height changeWidth.value = parseInt(changeWidth.value) + 'px' } else{ changeHeight.value = (img.height * 360) / img.width changeHeight.value = parseInt(changeHeight.value) + 'px' changeWidth.value = '360px' } } else { changeHeight.value = img.height + 'px' changeWidth.value = img.width + 'px' }

实现中多了两个内容，单位和除数取整

根据css文档可知，需要有单位样式才会起作用

等比例缩放的时候必然会出现一条边的数值为小数，虽然height 和 weight 可以取小数，但是不同浏览器可能会对其有不同解析，为了避免可能出现的问题，提前将其取整。

四、其他问题（1）如何获取图片长宽？ var img = new Image() img.src = res.resourceUrl img.onload = function () { }

详情如下：

JS快速获取图片宽高的方法_Jensen Wu UED-CSDN博客_js获取图片的宽高

（2）如何利用js改变样式

【本文地址】

公司简介

联系我们