实现图片的最小边展示,我们可以直接用background-size:cover;来解决,但是,background是毕竟不是img,如果想宽度固定,高度自适应还是比较难的,而直接用img,那么只能使用object-fit:cover;object-position:center;的方法,但是这种方法兼容性较差。
所以,这里我们探讨一些其他的方法。
我们可以让div套住img,通过div限制大小,通过获取img的尺寸自适应div。
思路确定
如下图所示,左侧空白正方形为一个box,右侧矩形为图片。
步骤一:新建一个box和一个图片;步骤二:可将图片最小边缩放至与box同样大小,然后将图片大小同比例缩放;步骤三:将图片移动至box中间位置。
问题分解
问题1:根据宽高比例不同,需要进行不同的缩放,如何得到图片的宽与高呢?
答:图片在不加载之前,是无法获取图片具体的尺寸的,那么就让图片先加载出来,先获得图片的尺寸,再根据图片尺寸类型进行展示。
注意:要把imgLoader挂载src的地方放在onload以后,以防止有缓存的情况下onload事件不执行。
问题2:如何计算图片展示的起点及图片应该展示的宽度?
答:在此类情况下,可以直接定位到中间部分。
问题3:如果图片的宽高相同且box为宽大于高该怎么展示?
答:当box的宽大于高,此时不可将图片的高度设置为与box相同,否则展示的样式会与最大边展示相同,如下图所示。
因此,此种情况,图片的高度应自适应,宽度与box同宽,即该类情况与图片的宽度小于图片的高度相同。
针对特殊情况的代码
同样的道理,如果以最大边作为展示的依据,则把两个规则调转一下即可,并增加一个选项。
这里按照background-size的方法,增加style参数,如果style='cover',表示按最小边展示,如果style='cover',表示按最大边展示。
问题4:如果按照最小边展示时,同比例压缩后的图片的宽小于box的宽怎么办?
答:有一种特殊情况,图片的宽大于高,但是同比例压缩后,图片的宽度仍然小于box的宽度,如下图所示。
因此,这里我们不应该使用图片的宽与高大小的差别来判断如何展示,而应该通过对图片与box的宽高比进行展示的判断。
广告网页设计与制作
作者:朱小杰
京东
img宽>img高
img宽>img高
img宽=img高
上面的一些图片,左侧是用方法一做到的效果,而右侧是用background-size:cover/contain达到的效果,可以看出,完全一致。
优化尺寸获取方式
但是上面的方法本质上是在加载过一次图片后,获取了宽高再进行调整。
虽然通常情况下,浏览器的资源缓存机制会使图像会只加载一次并在整个会话中使用,但是new Image()这种方法通常用作预加载,在此处我们不需要进行预加载,因此我们可以做这样的修改。
上面这种方式通过直接加载图片,然后获取图片的尺寸,再根据尺寸动态的进行修改图片的 展示。同样,也可以创建一次实例然后利用canvas加载图像的方法来展示。
在写canvas时请注意,canvas的宽高请使用js来调整,而不要修改css。
简单理解,canvas原理就是一个画画的原理,canvas这个标签是画板,而在canvas中展示的东西是在画布上的。在渲染canvas时,初始化画板为300*150,同样画布也是300*150。当通过改变canvas的style进行宽高的修改时,其实仅仅是修改画板的宽高,而当画板与画纸尺寸不统一时,画纸内的图像就会趋向于与画板的尺寸相同,必然会导致图像的拉伸或者压缩。
因此,在修改尺寸的时候,要同步修改画板与画纸,这里可以直接使用用HTML 5 canvas 的api动态控制。
总结
以上三种方法,都可以得到与background-size:cover;background-position:center;和object-fit:cover;object-position:center;相同的效果。各位也可以根据自己的需要调整max-height或transform等属性。