假设当前页面有一个banner，图片宽度有1920px，页面内容宽度1200px，需要banner图占满屏幕的左边和右边。但是用户的屏幕并不固定，有1200的也有1920甚至2000+分辨率的。
})%~56({TO4}@LAWJAK1328.png
<div class="banner">
<img src="../static/images/1595424745370.png" alt="">
//图片宽度1920px，高度350px，
</div>
<script></script>
<style scoped>
.banner{
height: 350px;
width: 100%;
}
.banner>img{
height: 100%;
width: 100%;
}
</style>
如上写法，img的100%必定会导致像第一张图的变形，因为用户的屏幕宽度并不同。
此时想要将banner图居中且图片不变形的话，需要如下写法
<style scoped>
.banner {
width: 100%;
height: 350px;
background-color: #101010;
overflow: hidden;
}
.banner > img {
overflow: hidden;
width: 1920px;
height: 350px;
position: relative;
left: 50%;
margin-left: -960px;
}
</style>
当屏幕宽度小的时候，图片居中显示，边缘被隐藏：
888552.png
当屏幕宽度大的时候，边缘会显示banner的背景色，可以把背景色改成与图片背景相似的颜色，减少不协调感：
995552.png
完毕。
