cesium加载entity图片缩放_教你使用最简单粗暴的js方法实现图片最小边展示

实现图片的最小边展示，我们可以直接用background-size:cover;来解决，但是，background是毕竟不是img，如果想宽度固定，高度自适应还是比较难的，而直接用img，那么只能使用object-fit:cover;object-position:center;的方法，但是这种方法兼容性较差。

所以，这里我们探讨一些其他的方法。

我们可以让div套住img，通过div限制大小，通过获取img的尺寸自适应div。

思路确定

如下图所示，左侧空白正方形为一个box，右侧矩形为图片。

• 步骤一：新建一个box和一个图片；
• 步骤二：可将图片最小边缩放至与box同样大小，然后将图片大小同比例缩放；
• 步骤三：将图片移动至box中间位置。

问题分解

问题1：根据宽高比例不同，需要进行不同的缩放，如何得到图片的宽与高呢？

答：图片在不加载之前，是无法获取图片具体的尺寸的，那么就让图片先加载出来，先获得图片的尺寸，再根据图片尺寸类型进行展示。