响应式设计如何统一展示不同比例尺寸的图片

在做响应式页面的时候，有时候会遇到这样的情况，比如一个商品列表页，商品图的宽高比是 1:1 ，也就是正方形，但接口提供的数据里，图片的尺寸、比例均不统一，有的是 200*200 ，有的是 220*200 ，有的又是 180*200 ，面对这种情况，前端有什么样的应对方法呢？

场景模拟

针对上面的描述，我们先把真实场景模拟出来，看看如果不做任何处理，会是怎么样的展示效果？

可以看到，我分别用了 3 种尺寸的图片代表商品图，因为是做响应式，图片尺寸无法写死，所以图片外层容器的宽度我设为 50% ，图片则宽度设为 100% ，高度不设置，这样图片可以根据不同分辨率等比缩放。

但最终呈现出来的效果，却因为图片比例尺寸不统一导致展示效果不整体。

解决方案

前端展示的问题，当然优先还是考虑用 CSS 来解决。

首先，我们先确定解决思路，想让展示的图片统一，有两种办法，一种就是把宽高写死，不管是把图片的宽高写死，或者把图片外层容器的宽高写死，都可以解决这个问题。

但这方法并不适用于响应式的页面，那我就考虑另一种办法，就是把图片宽高比例写死。一定有人有疑问了， CSS 还可以设置图片的宽高比例？

下面的这个方法虽然不太优雅，但确实能解决这类问题。

其实我们并不需要去设置图片的宽高比例，只需要准备一张一样宽高比例的 PNG 透明图即可，可以把这张图理解为“占位图”。比如这里我们的宽高比例是 1:1 ，那只需准备一张 1*1 的透明图，然后 img 标签引用这张透明图，真实的展示图通过设置 background-image 展示出来即可。我们来看看效果如何：

如果有需要，可以给图片设置下 background-size:cover; 和 background-position:center; 样式，这样可以让背景图进行填充并且居中展示。

总结

这个办法其实算是剑走偏锋了，在实际生产环境中，如果在数据源不可控的情况下，才会使用这种办法来处理。

但如果在数据源可控的情况下，建议去和接口或者后台开发人员沟通，最好在上传的时候就将图片裁切好前端所需要的尺寸，一劳永逸。