如何让轮播图在高度固定、宽度100%、不同分辨率的情况下固定宽高比，居中显示

最近被公司当前端使了，没办法，小公司招不到也不愿高薪招前端，只能我这个后台顶上去。

遇到如标题一样的问题，首页轮播图在不同的分辨率下会发生变形。这是因为图片被设置了 100% 宽度和固定高度。分辨率发生变化时，宽度会拉升或者收缩，而高度固定，图片本身宽高比会失衡，变形在所难免。一开始想到可以将图片设置为背景，然后图片居中展示。但这样改动太大，因为轮播图部分使用了 destoon 的广告位，外面包裹 swiper 轮播插件层。destoon 的广告位使用 ad() 方法加载了静态缓存内容，需要提取图片的 src 和图片上绑定的 url。

一开始想说明情况，不好做，推脱掉。后面被一从工品汇跳槽过来的运营经理指正，说工品汇网站也是 100% 宽度，高度固定，图片就没有变形失真。打脸了，没办法，只能想办法改。看了一下工品汇官网首页轮播图部分代码，也是使用了 swiper 轮播插件，swiper-slide 类（swiper 轮播层）绑定在 a 标签上，图片作为背景图片也设置在 a 标签上。针对轮播层设置的样式：

swiper-slide {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 50%;
}

除此以外未发现其他特别的 css 样式。查了一下 background-position 属性，可以设置两个值，第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%，右下角是 100% 100%。如果仅规定了一个值，另一个值将是 50%。所以这个行 css 样式就是让背景图片居中显示。跟我之前的想法不谋而合。

将图片作为某层的背景，自然不需要考虑宽高比变化，所以只需要让背景图片居中显示即可。

剩下的改造 html 结构了。本来想通过 ad() 函数获取到输出内容再通过 preg_match 正则匹配提取其中的 url 和 图片 src信息，但 ad() 内部获取到缓存文件内容后直接 echo 输出了，没有办法提取（是我懒得去想了）。回过神来，突然想到后台广告位除了生成缓存文件，还存到数据库中了，那么我为什么不直接去数据库去取呢？豁然开朗，后面就没什么问题了，取到几个广告位上绑定的广告内容，然后前端遍历输出、绑定到 a 标签上就 OK 了。