实现图片的最小边展示,我们可以直接用background-size:cover;来解决,但是,background是毕竟不是img,如果想宽度固定,高度自适应还是比较难的,而直接用img,那么只能使用object-fit:cover;object-position:center;的方法,但是这种方法兼容性较差。
所以,这里我们探讨一些其他的方法。
我们可以让div套住img,通过div限制大小,通过获取img的尺寸自适应div。
思路确定
如下图所示,左侧空白正方形为一个box,右侧矩形为图片。
- 步骤一:新建一个box和一个图片;
- 步骤二:可将图片最小边缩放至与box同样大小,然后将图片大小同比例缩放;
- 步骤三:将图片移动至box中间位置。
问题分解
问题1:根据宽高比例不同,需要进行不同的缩放,如何得到图片的宽与高呢?
答:图片在不加载之前,是无法获取图片具体的尺寸的,那么就让图片先加载出来,先获得图片的尺寸,再根据图片尺寸类型进行展示。