背景图片根据分辨率大小始终铺满居中不变形

分三层,第一层relative,第二层absolute,第三层fixed
扩充父元素的宽高

  • html
<div class="page-container">
    <div class="front-container">
        <div class="front-bg">
            <img src="img/01_02.jpg" class="bg">
        </div>
     </div>
</div>
  • css
.page-container{
    position: relative;
}
.front-container{
    min-height: 690px;         
    max-height: 750px;         
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;          
    left: 0;
}
.front-bg {
    position: fixed;
    width: 200%;
    height: 200%;
    left: -50%;
    background: #fff;
}
.front-bg img {
    display: block;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,816评论 1 92
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,232评论 0 1
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,228评论 0 8
  • 说话技巧一直是一门大学问,大家都是学生,在共同学习着。 最近,突然觉得“可爱”的你们突然“不可爱”了。且听慢慢诉说...
    毓灵雨阅读 967评论 0 2
  • 一个冷不防,悲伤奔流成河。 岁月顺流而下,我在河面瞥见记忆的倒影。 你被流水带去了远方。 掷一颗石子 ,看涟漪荡开...
    人生试用者阅读 435评论 2 8