Css3中背景图片宽度自适应，高度不变

Css3中背景图片宽度自适应，高度不变

十一月 08, 2018

最近在做一屏监控页面的时候，美工设计的顶栏背景图是要切图的那种，顶栏按钮都是在图片上进行布局的，这样就遇到一个问题，分辨率变小的时候顶栏高度会塌陷，要实现的效果就是分辨率变小的情况下，两边缩减，中间高度保持不变，几经周折终于解决。

1
2
3
4
5
6
7
.top {
    width: 100%;
    height: 112px;
    background: url(...) no-repeat center;
    /*1920是我的图片宽度，112是设置的顶栏高度，这样子可以保证1920px的图片在低分辨率上展示高度不会变*/
    background-size: 1920px 112px; 
}