小图片放大后自适应宽高

aline2013
  • 139

会话框中,后台统一提供一张24*24px的小图片作为占位符,为后面加载的真实图片占位,现在的做法是设置占位图片的宽高属性为真实图片宽高,然后用max–width达到自适应效果,这样去防止加载后图片撑大,会话框闪烁的问题。但是设置了占位图宽高属性后就不能自适应了,反而是由大变小地闪烁, 怎么通过css或是js去使占位符和原图自适应之后所呈现的图片宽高一样,以避免闪烁??? 整了一天都不行,求大神们解答疑惑

回复
阅读 1.7k
3 个回答

我没理解错的话,你就设置一个div,设置他的宽高固定,然后加载的图片放在里面,再加上一段js,说不管图片大还是小,都将其宽高变为你div的宽高。

提供你一个方式,不要设置他的宽高,而是设置他的padding值,然后 获取到的图片为这个元素的背景

我采用的是对比原图长宽大小,哪个大,按照它来定最后大小,当height>width时,设置var showHeight= 100;var showWidth=100*width/height;同理,当width>height时,设置 var showWidth = 200;var showHeight = 100*height/width;固定图片的大小

你知道吗?

宣传栏