Question

我正在创建一个网页（使用bootstrap），在我的一个容器标签中，我试图设置一个背景图像，我希望这个图像根据屏幕大小动态调整大小（不会被裁剪）。我使用了以下html和CSS代码。

HTML代码

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Main stylesheet-->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="container">
        <div class="row new-class">
            <div class="col-xs-12 new">
            </div>
        </div>
    </div>
    <!--some more code here-->
    <!-- jQuery -->
    <script src="js/jquery.min.js"></script>
    <!-- jQuery Easing -->
    <script src="js/jquery.easing.1.3.js"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
    <!-- Main JS -->
    <script src="js/main.js"></script>
</body>

CSS

.new-class 
{max-width: 4368px;}

.new {
      padding-top: 63.227%;
      height: 150.24px;
      background-image: url("/images/9087.jpg");
      background-position: center;
      background-size: cover;
     }

这段代码就是这样做的但是当我尝试将背景附件固定为固定时会出现问题，它会使图像变大并且图像会被裁剪和模糊。
我的原始图片尺寸为4368 * 2912像素。

Answer 1

我相信你希望标题从事物的声音中成为页面上的静态元素？即当用户滚动时标题根本不移动？如果是这样的话，试试这个：

html{
    height: 100%;
    width: 100%;
}
body{
    height: 100%;
}
.container{
    height: 20%;
    width: 100%;
    position: fixed;
    background-image: url("/images/9087.jpg");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

如何动态调整容器元素内的背景图像？

1 个答案: