番外:IMG 改造计划——imgCenter.js
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

imgCenter.js:https://github.com/lc60005457/imgCenter

I have a dream.

示例图片

eqWidth

IMG 标签是为了在 HTML 中显示图片,但是在使用中总是遇到一些棘手的问题:

  • 我想让图片指定宽高,但是它被拉伸变形了。
  • 只指定宽或只指定高,另一边要么不够,要么超出啊!

我还是需要指定宽高显示啊!没办法,用 ps 裁吧。

No!现在不需要了,咱们去改造 IMG 标签吧!

基本原理

CSS 为我们提供了一个图片背景的属性,完爆我的需求有没有:

<div style="
  width: 100px;
  height: 100px;
  background-image: url(http://htmljs.b0.upaiyun.com/uploads/1405842325316-194962-106.jpg);
  background-position: center;
  background-size: auto 100%;
"></div>

自己复制代码区看效果

等等,你难道没发现什么不对吗?

如果宽度过宽,background-size 的值就应该改成 100% auto

我长时间以来都是去手动把需要的 IMG 改成这个样子,现在,再也忍不下去了!

JS,赐于我力量吧

css 中有个 expression,可以写类似 JS 的代码,用来解决 100% auto 还是 auto 100%,但是不推荐使用。

如果用到 js 的话,为何不让暴风雨来的更猛烈些呢?

HTML 中的 IMG 标签全部换成了这么一坨东东,不感觉很恶心么?

咱还可以在 HTML 继续用 IMG 标签,然后用 JS 把他换成想要的那坨,嘿嘿:

var bimg = document.getElementsByTagName('img')[0];
var fa = bimg.parentNode;
var timg = new Image();
timg.src = bimg.src;
var div_img = document.createElement('div');
div_img.style.width = bimg.style.width? bimg.style.width: bimg.width + 'px';
div_img.style.height = (bimg.style.height != "")? bimg.style.height: bimg.height + 'px';
div_img.style.backgroundImage = 'url(' + bimg.src + ')';
div_img.style.backgroundPosition = 'center';
var w = parseInt(div_img.style.width.split("px")[0]);
var h = parseInt(div_img.style.height.split("px")[0]);
div_img.style.backgroundSize = (timg.width/timg.height > w/h)? "auto 100%": "100% auto";
div_img.style.display = "inline-block";
fa.replaceChild(div_img, bimg);

额,我不建议你看上面那一坨,因为,继续往下看吧。

imgCenter.js

如果把 IMG 换成了 div,你会发现一些定义在IMG 上的 CSS 样式失效了,甚至 JS 的一些事件监听也失效了。

那么,我们何不就这样,不变标签,就把 IMG 的 CSS 图片背景改掉呢?

欢迎大神们来指点我写的第一个实用框架:

https://github.com/lc60005457/imgCenter

以下为效果图:

eqHeight

评论
发表评论
暂无评论
WRITTEN BY
BoltDoggy
A doggy named Bolt.
TA的新浪微博
PUBLISHED IN
My Code Wars 我的代码战争【休息一下】

这里讲述的是一个8级(kyu)菜鸟立志成为8段(dan)大神的故事。

他在代码战争中一次次遭遇挫败,而又在乱炖中获得高人指点。

遥想当年自高自大,而今终知天外有天。

坚持要走出一条自己的路,这是一条不归路。


Bolt 在写underscore.js源码分析专栏的时候发现了一个问题,就是看别人写的代码的时候自认为看懂了,但实际上有理解错误自己也不知道。

另外就是看了再牛逼的代码,自己写的时候,还是那些小套套。

于是 Bolt 开了一个新专栏:My Code Wars 我的代码战争。在同一需求下,菜鸟写的代码与大神有什么区别,是思维方式不同,还是什么原因导致的?

欢迎大家来新专栏提供意见和建议。

我的收藏