问题描述

这段时间，我在做PM需求的时候突然发现一个问题。产品上的图片来自很多第三方，具体尺寸无法确定。图片的大小如果直接写在款式上，图片会拉长，会很大程度上影响产品的美观。所以，我希望能找到更好的解决办法。我首先做了一个简单的演示来展示这个问题。

html healtheta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 '脚本src='http:/js/jquery-1 . 11 . 1 . min . js '/script style . img 1 { width :200 px；高度：200 px；border: 1px固体# 000；飞越：隐藏；margin: 10px} . img 2 { width :200 px；高度：90 px；border: 1px固体# 000；飞越：隐藏；margin: 10px}/style/head body div class=' img 1 ' style=' width : ' img id=' img 1 ' src=' http :/img/1 . jpg ' height=' 100% ' width=' 100% '/div div class=' img 2 ' style=' width : ' img id=' img 2 ' src=' http :/img/1.jpg '高度='100% '宽度=' 100% '/div/body/html

以上情况还是影响了美观。可以考虑动态设置图片大小吗？

解决方案

在浏览器中加载图片资源后，是否可以获得图片的真实大小和图片容器的大小，然后动态设置图片的宽度和高度属性。

获取图片的真实大小

在html5下，已经提供了相应的方法来返回图片的真实大小(img.naturalWidth，img.naturalHeight)。对于IE6/7/8，也可以通过以下方法获得真实尺寸。

var imgae=new Image()；image . src=img . src；image . onload=function(){ var w=image . width；var h=image.height}编写相应的JS方法，得到图片的真实大小和图片容器的大小。

setImgSize :函数(img，回调){ if(img.naturalWidth){//html 5回调(img，img . natural width，img.naturalHeight，img.width，img . height)；} else {//IE 6 7 8 var imgae=new Image()；image . src=img . src；image . onload=function(){ callback(img，image.width，image.height，img.width，img . height)；}}}重置图片大小

在获得图片的真实大小后，我们需要重置图片的大小。这里简单介绍一下处理目标：如果设置的尺寸超过显示区域，将显示图片的中间部分；如果显示区域大于图片的大小，图片将显示在中央。简单说明一下，黑色实线是图片的显示区域，绿色部分是图片的大小。

下面，我们提供三种处理图片的方法，分别是上面两种(统一宽度)、下面两种(统一高度)和右边两种(全显示区域)。分别介绍了以下三种方法：

首先，确保宽度一致

//原始宽度、原始高度、容器宽度和容器高度//确保宽度一致resetimgsizew:函数(img，NW，NH，w，h){ nwh=NW/NH；wh=w/h；if(nwh wh){ img . width=w；var height=ParSeint(1/nwh * w)；img.height=高度；var top=ParSeint((h-height)/2)；img.style.marginTop=top ' px} else if(nwh wh){ img . width=w；var height=ParSeint(1/nwh * w)；img.height=高度；var top=parsent((height-h)/2)*-1；img.style.marginTop=top ' px} else { img . height=h；img . width=w；}}，这里我们需要判断图片原尺寸的长宽比和容器的长宽比之间的关系。如果高度丰富，那么画面会上移一定的像素。如果高度不够，图片会下移相应的像素。至于另外两种情况，也是同样的逻辑。首先看处理后的效果：

第二，确保高度一致性

//吴经熊先生嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯是云娥是景麒//绿筠小姐resetimgsizeh :函数(img、nw、nh、w、h){ nwh=NW/NH；wh=w/h；if(nwh wh){ img。高度=h；var width=ParSeint(nwh * h):img . width=宽度：var left=parseInt((宽度- w)/2) * -1:img。风格。margin left=left ' px } else if(nwh wh){ img。高度=h；var width=ParSeint(nwh * h):img . width=宽度：var left=parse int(w-width)/2:img。风格。marginleft=left ' px} else { img。高度=h；img。宽度=w；}

976年~我爱你~安其林安其林安其林

//吴经熊先生嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯嚯是云娥是景麒//1388年resetimgsizewh :函数(img、nw、nh、w、h){ nwh=NW/NH；wh=w/h；if(nwh wh){ img。高度=h；var width=ParSeint(nwh * h):img . width=宽度：var left=parseInt((宽度- w)/2) * -1:img。风格。margin left=left ' px } else if(nwh wh){ img。宽度=w；var height=ParSeint(1/nwh * w):img。height=height var top=parse int((height-h)/2)*-1:img。风格。margintop=top ' px} else { img。高度=h；img。宽度=w；}，

哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟联署材料

朱庇特先生，你是说朱庇特先生吗，云娥？云娥。

！-341日联署材料东奔西跑-src=http 3360脚本. js/imageload。js '/script var image load=new image load()；//你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，你看，978年//imageload。init img(' w ')；//范仲淹？范仲淹//imageload。init img(' h ')；//绿筠小姐//imageLoad.initImg('wh ')://安其林安其林安其林//哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟哟，范登韦恩斯特范登韦恩斯特范登韦恩斯特范登韦恩斯特imageload。setmgsize(文档。getelement byid(' img 1 ')，imageload。resetimgsizewimageload。setmgsize(文档。getelement byid(' img 2 ')，imageload。resetimgsizewimageload。setmgsize(文档。getelement byid(' img 3 ')，imageload。resetimgsizehimageload。setmgsize(文档。getelement byid(' img 4 ')，imageload。resetimgsizehimageload。setmgsize(文档。getelement byid(' img 5 ')，imageload。resetimgsizewhimageload。setmgsize(文档。getelement byid(' img 6 ')，imageload。resetimgsizewh/scriptImageLoad喜曰

$(文档)。ready(function(){ new ImageLoad()；});ImageLoad=function(){ this。init()；};imageload。prototype={ init : function(){//this。initiam g(' w ')；}，initImg :函数（类型){ var _ this=thisvar imgs=document。getelementsbytagname(' img ')；for(var I=0；iimgs . lengthi){ try { var img=imgs[I]；if ('w'==type) {$(img).onload=_this.setImgSize(img，_this。resetimgsizew)；} else if ('h'==type) {$(img).onload=_this.setImgSize(img，_this。resetimgsizeh)；} else if ('wh'==type) {$(img).onload=_this.setImgSize(img，_this。resetimgsizewh)；} } catch(e) {}}}，//原始宽度原始高度容器宽度容器高度//保证高度一致resetImgSizeH :函数(img，nw，nh，w，h){ nwh=NW/NH；wh=w/h；if(nwh wh){ img。高度=h；var width=ParSeint(nwh * h)；img . width=width var left=parsent((width-w)/2)*-1；img。风格。左边距=左边“px”；} else if(nwh wh){ img。高度=h；var width=ParSeint(nwh * h)；img . width=width var left=ParSeint((w-width)/2)；img。风格。左边距=左边“px”；} else { img。高度=h；img。宽度=w；}},//原始宽度原始高度容器宽度容器高度//保证宽度一致resetImgSizeW :函数(img，nw，nh，w，h){ nwh=NW/NH；wh=w/h；if(nwh wh){ img。宽度=w；var height=ParSeint(1/nwh * w)；img.height=高度；var top=ParSeint((h-height)/2)；img . style . marginTop=top ' px } else if(nwh wh){ img。宽度=w；var height=ParSeint(1/nwh * w)；img.height=高度；var top=parsent((height-h)/2)*-1；img . style . MarginTop=top ' px } else { img。高度=h；img。宽度=w；}},//原始宽度原始高度容器宽度容器高度//铺满全屏resetImgSizeWH :函数(img，nw，nh，w，h){ nwh=NW/NH；wh=w/h；if(nwh wh){ img。高度=h；var width=ParSeint(nwh * h)；img . width=width var left=parsent((width-w)/2)*-1；img。风格。左边距=左边“px”；} else if(nwh wh){ img。宽度=w；var height=ParSeint(1/nwh * w)；img.height=高度；var top=parsent((height-h)/2)*-1；img . style . MarginTop=top ' px } else { img。高度=h；img。宽度=w；}},//获取图片真实尺寸以及容器尺寸setImgSize :函数(img，回调){ if(img.naturalWidth){//html 5回调(img，img。自然宽度，img.naturalHeight，img.width，img。高度)；} else {//IE 6 7 8 var imgae=new Image()；图像。src=img。src图像。onload=function(){ callback(img，image.width，image.height，img.width，img。高度)；}}},}以上所述是小编给大家介绍的使用Java脚本语言解决网页图片拉伸问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！