标签归档:图片

关于图片宽高 – 如果爱,请深爱

有如下代码:

1
<img src="http://placehold.it/300" height="" />

其在 IE 下的解析将会是:

图片有height属性但无值在IE下的解析结果

可以看到,写了 height 属性,但没写值时,IE 下会把其当作 1,而 Chrome 等则会忽视该属性,从而导致了 Chrome 等下是原图大小,而 IE 下则看不到图片。

如果爱,请深爱;如果写,请不空。

P.S. 像这种情况,可能极少遇到,但种种原因,我遇到了,故记录之。

鼠标滚轮缩放图片

浏览网页的时候,有时候图片局限于网站而很小,即便原来是一张大图。为了偷懒不想新标签页打开图片,于是写了个小小的 bookmarklet 来直接在图片上通过鼠标滚轮来进行缩放。

1
javascript:(function(){var imgs=document.getElementsByTagName('img');var rate=rate||0.1;for(var j=0,l=imgs.length;j<l ;j++){(function(i){var item=imgs[i];item.onmousewheel=function(e){e=e||window.event;zoom(imgs[i],mouseWheelRes(e),rate);};if(item.addEventListener){item.addEventListener('DOMMouseScroll',function(e){zoom(imgs[i],mouseWheelRes(e),-rate);},false);}})(j);}function zoom(img,inOut,rate){if(inOut>0){img.width=img.width*(1+rate);img.height=img.height*(1+rate);}else{img.width=img.width*(1-rate);img.height=img.height*(1-rate);}}function mouseWheelRes(e){e.preventDefault?e.preventDefault():e.returnValue=false;e.stopPropagation?e.stopPropagation():e.cancelBubble=true;return e.wheelDelta||e.detail;}})();

可读性良好一些的代码如下:
继续阅读