您的位置:首页 > 前端开发 > 技术笔记

仿新浪微博图片旋转并缩放原理探索

2016-06-20 22:53:02

现代浏览器(非IE和ie9及以上浏览器)



添加旋转属性

给图片加 transform:rotate(90deg),点击下面的“旋转”按钮,查看效果

加旋转属性后,图片的“灵魂”就“飘”出来了,但是它的“肉体”还是之前一样在文档流中起着作用。灰边儿是包裹图片的容器,容器没有被图片撑开,实际宽高没有发生任何变化。


总结如下:

添加transform:rotate(90deg)属性描述后,图片会脱离文档流并绕其自己的中心点进行旋转,但是其盒子属性不会发生任何变化,即位置、宽、高均没有变化。即如果此时用js获取图片的宽高,返回的值是依然是图片未旋转时的宽高,而不是我们实际所看到的由之前的高变成了现在的宽、由之前的宽变成现在的高。图片的容器依然是原来的大小,并不会被旋转的图片撑开。


如何让图片在旋转后将父容器“撑开”?

我比较懒,没研究出来有没有这样的属性,所以采用了js的方法,图片旋转后计算出旋转后的高度,为图片的父容器设置之。计算图片旋转后的实际高度,其实就是图片未旋转时的宽度,于是就有了下面的效果,请点击“旋转”

可以看到,容器的高度已经设置的和图片旋转后的高度一样了,但是,图片依然“浮”在半空中,而且上边高出了个头。由于旋转的图片是脱离文档流的,所以它还是做着它的“仙”,高高在上啊。怎么办咧,是滴,给图片加“margin-top:xxpx“属性,但是设置成多少合适呢?我们首先弄明白其中奥秘。看下图:

未标题-1.jpg


旋转图片下面的红框即为旋转图片在文档流中实际的位置,大小。对旋转图片的属性取值均是取的红框的值。所以为旋转图片设置的margin-top值 为 (box_height-img_height)/2,而box_height==img_width,所以实际为旋转图片设置的margin-top值 是 (img_width-img_height)/2。效果如下,点击“旋转按钮”:


旋转图片并对其进行缩放

如下例,容器的宽度是的(300px),图片是横长型的(800px*500px),原图大小比容器的宽度大很多,所以在图片初始的时候就已经对其做了限制,给图片加了个css属性max-width:300px,那么此时图片的高度已经变成了resize_height=(300*500/800)+"px"。当点击“旋转”按钮时,图片旋转90度,根据上文所讲,我们把父容器高度设置成初始时的宽度,点击旋转按钮

旋转90度后,跟上文所讲的效果是一致的,图片两边到容器的边沿有空白部分,但是图片实际的尺寸是完全可以把这部分空白填满的,所以,在图片旋转后需要对图片进行缩放,使它的“宽度”等于300px,我在此给“宽度”一词加引号,是因为,这里的宽度调整实际上是调整的图片的高度,再来看一遍这张图:

未标题-1.jpg

图片无论如何旋转,它所有的属性操作依然是那个无形中的“红框”,所以我们看到的旋转90度的图片的宽度其实是红框的高度。那么就设置之,当把红框的高度设置成300px后,那么它的宽度(图片旋转90度后的高度)也应等比例缩放,点击“旋转”按钮:

我们点击旋转后发现,图片并没有完全在容器内,而是向右偏移了,这是为什么呢?请看下图:

示例.jpg

由于图片放大了,所以它的旋转中心点也会发生变化,所以就看到图片右移了,所以只要让图片的中心和容器的中心对齐即可。如何计算呢?即只要让红框的中心和容器的中心齐。

x=-(img_width-box_width)/2,此式子得出的值即要为图片修正的值,给图片加margin-left:x即可。看效果:



古代浏览器(IE7、IE8)

为图片添加

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);


IE8下,看下图:

ie8.jpg

如上图示意,图片旋转后,旋转的图片也表现出了"浮"在半空的特性,但是图片的位置会像一个没有“浮”起来的图片一样,处于“容器”的左上角(此处“容器”是指图片未旋转时轮廓(红框)),并且,“浮”起的图片不会撑开父容器,不会引起周围任何元素的大小位置变化。图片的实际大小位置依然是图片红框的大小和位置。


IE7下,看下图:

ie7.jpg

如上图示意,图片旋转后,图片没有“浮”的表现,会撑开父容器,表现出的效果就像真的在物理上把图片旋转了一样,但是它的”宽"和”高“依然和其他浏览器表现一样并没有“交换”。

IE6,就不测试了。



根据以上原理写了个仿新浪微博图片预览,移步至:http://www.hovis.cn/zp/2016-06-23/47.html


收工。



more 最近