我正在创建一个网页(使用 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 像素。
最佳答案
我相信您希望 header 成为页面上的静态元素吗？即当用户滚动时标题根本不移动？如果是这样的话，试试这个:
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;
}
关于html - 如何在容器元素内动态调整背景图像的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39105912/