使用JavaScript解决网页图片拉伸问题(推荐)

前端之家收集整理的这篇文章主要介绍了使用JavaScript解决网页图片拉伸问题(推荐)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

问题描述

这段时间在做PM的需求的时候突然发现一个问题,产品上的图片来自多个第三方,具体的尺寸无法确定,如果直接在样式中写死图片的尺寸大小就会出现图片拉伸的现象,十分影响产品的美观,因此希望可以找到一个比较好的解决方案。自己先做了一个简单的demo来展示问题。

<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

ImageLoad源码

wh) { img.height = h; var width = parseInt(nwh * h); img.width = width; var left = parseInt((width - w) / 2) * -1; img.style.marginLeft = left + "px"; } else if (nwh < wh) { img.height = h; var width = parseInt(nwh * h); img.width = width; var left = parseInt((w - width) / 2); img.style.marginLeft = left + "px"; } else { img.height = h; img.width = w; } },//原始宽度 原始高度 容器宽度 容器高度 //保证宽度一致 resetImgSizeW : function(img,//原始宽度 原始高度 容器宽度 容器高度 //铺满全屏 resetImgSizeWH : function(img,//获取图片真实尺寸以及容器尺寸 setImgSize : function(img,img.height); } } },}

以上所述是小编给大家介绍的使用JavaScript解决网页图片拉伸问题。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的JavaScript相关文章