防止图片拉伸的Javascript自适应处理方法

前言

相信在日常的网页开发中，作为前端，你会经常遇到处理图片拉伸的问题。

例如，横幅、图形列表、头像等。所有用户或客户可以独立上传图片的地方，但一旦涉及到图片，就会涉及到图片拉伸的问题。当然，上传图片时手动裁剪，让用户或客户能够清晰感知图片的有效内容，才是最好的解决方案。但在其他外部因素下，如果没有进行裁剪，则需要在前端显示器上进行处理，以满足上传任意尺寸图片时的最佳显示效果。

这时，我们需要考虑极端效应，如下图所示：

我们想要得到的效果是这样的-

将图片放入相框需要多少步？三步.我们开始吧

第一步：先画一个框架(安利这里用的是自适应框架法)

//假设在750px的屏幕上需要一个宽400px、高280px的盒子。//宽度=400/750=0.5333//高度=280/400 * 0.5333=0.3733样式。img-box {相对位置3360；宽度：53.33%；高度： 0；填充-底部： 37.33%；飞越：隐藏；背景色： # eee；}/style body div id=' list ' div class=' img-box ' img src=' http : '//div/div/body第二步：设置图片需要的css

风格。宽度{ position:绝对值！重要；宽度： 100%！重要；最小高度： 100%！重要；top: 50%！重要；transform: translateY(-50%)！重要；-ms-transform : translateY(-50%)！重要；-moz-transform : translateY(-50%)！重要；-web kit-transform : translateY(-50%)！重要；-o-transformer : translateY(-50%)！重要；display:块；} .高度{ position:绝对值！重要；高度： 100%！重要；最小宽度： 100%！重要；left: 50%！重要；transform: translateX(-50%)！重要；-ms-transform : translateX(-50%)！重要；-moz-transform : translateX(-50%)！重要；-web kit-transform : translateX(-50%)！重要；-o-transformer : translateX(-50%)！重要；display:块；}/style步骤3: js获取图片高度比较，并将类名添加到img中

//需要注意的是，不能在css中直接设置img的宽度和高度。//否则，img.onload后得到的宽度和高度就是css设置的宽度和高度。//同时建议使用dom对象获取img标签脚本var list=document . getelementbyid(' list ')；getImgWH(列表)；//执行宽高比较，设置img类名函数geting wh(obj){ variamg=obj . getelementsbytagname(' img ')；for(var I=0；长度；i ){ img[i]。onload=function(){ var width=this . width；var height=this.heightif(宽度高度){ this . class list . add(' height ')；} else if(width height){ this . class list . add(' width ')；} else { this . style . width=' 100% '；this . style . height=' 100% '；} } } } }/脚本图片很容易防止拉伸，但在实际项目中需要足够重视。网页变成了图片，但也失去了图片。拉伸图片是在等设计师慢下来，哈哈哈哈.

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。