在项目中遇到一个需求，要实现一个自适应的banner，保持图片中间部分在不同屏幕尺寸下始终可见，且不挤压文字。通过分析产品给出的参考效果，发现需要避免图片拉伸，保持高度不变。最终采用给图片包裹div并控制div居中显示的方法，成功实现了预期效果。
最近项目中需要实现一个banner，如图所示.（设计图稿为1680*412）
当前实现的思路：
div(position:relative;width:100%;height:412px;)>ul >li>a>img (width:100%;height:412px)
问题：平铺桌面但文字会被挤压
这个时候，产品给出了一个参考效果,见链接.https://hz.fang.com/?s=BDPZ-BL。(图片尺寸2000*)总体效果是，屏幕大屏，缩放时内容不会被压缩，一直展示图片中间部分。
实现原理貌似是这个样子的:
div(position:relative;width:100%;)>a(position:absolute;margin-left:-1000px;left:49%;)>img(width:2000px;height:464px;)
使用的是自适应居中的技巧，想到一个方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
position: rel
最低0.47元/天 解锁文章
809
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
