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

遇到如标题一样的问题,首页轮播图在不同的分辨率下会发生变形。这是因为图片被设置了 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 了。