如何保证CSS背景图片不变形？

在网页中用css控制背景图片全屏显示代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .bg {
        background: url(http://ww1.sinaimg.cn/large/76fc743bjw1evkctlqixoj21kw0w01ay.jpg) no-repeat;
        background-attachment: fixed;
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
    }
    </style>
</head>
<body class="bg">
    
</body>
</html>

背景图片确实全屏显示了。但是把窗口缩小的时候图片变形，如何保证背景图片不变形呀？

最后的办法就是要写@media了

@media only screen and (max-width: 1199px) {
  .bg {
    background: url(http://ww1.sinaimg.cn/large/76fc743bjw1evkctlqixoj21kw0w01ay.jpg) no-repeat;
    background-attachment: fixed;
    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
  }
}

background-size: 100% 100%;这里让你变图片变形了。。可以一个设置 100% 一个设置 auto 。。这得看你图片是宽和高哪个更长

.bg {
    /* ...Previous styles */
    background-size: cover;
}

完美实现全屏显示不变形…

【热门文章】