实现图片的最小边展示，我们可以直接用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等属性。