我的网站有背景图片，但背景似乎与浏览器保持相同大小。我将在下面的照片中进行解释，以了解我要解释的内容。
顶部图片显示背景适合浏览器，而第二张图片显示背景不适合，因为浏览器已被裁剪到左侧并且大小减半。在这里，我不希望在背景图像之间添加空白，而是希望放大图像。
我不确定这可能是什么问题，感谢您的帮助。
@import compass;
@import url(https://fonts.googleapis.com/css?family=Dosis);
@import url(https://fonts.googleapis.com/css?family=Marvel:400,400italic);
/*
html {
background: url(countryside.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
*/
@font-face {
font-family: 'Guldscript';
src: url('.eot');
src: url('guldscript.eot?#iefix') format('embedded-opentype'),
url('guldscript.woff2') format('woff2'),
url('guldscript.woff') format('woff'),
url('guldscript.ttf') format('truetype'),
url('guldscript.svg#Bruss') format('svg');
font-weight: normal;
font-style: normal;
}
html, body{overflow:hidden;}
h1 {
font-family: Guldscript;
color: #FCFFF5;
text-align: center;
font-size: 30px;
text-indent: 40px;
}
h2 {
font-family: Guldscript;
color: #FCFFF5;
text-align: center;
font-size: 20px;
text-indent: 40px;
}
body {
margin: 0;
padding: 0;
font-family: "Source Sans Pro", sans-serif;
}
header {
width: 100%;
padding: 10px 0;
background-color: #1E1E20;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
z-index: 9999;
top: 0;
position: fixed;
}
.container {
width: 40%;
margin: 180px auto;
}
.shrink {
padding: 0.5px 0;
}
.centered {
position: fixed;
top: 70%;
left: 70%;
margin-top: -35%;
margin-left: -35%;
}
.footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
background-color: #1E1E20;
font-family: Guldscript;
color: #FDFDFD;
font-size: 20px;
text-indent: 40px;
height:40px;
padding-top: 20px;
z-index: 10;
}
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #1E1E20;
font-family: 'Dosis', sans-serif;
}
li {
display: inline;
}
li a {
color: white;
text-align: center;
padding: 5px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
p.maintext {
padding-top: 100px;
padding-left: 20%;
padding-right: 20%;
font-family: 'Marvel', sans-serif;
color: white;
background-color: 1E1E20;
text-align: justify;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}<!DOCTYPE html>
<!--
Sunday, 31st January 2016. | I got bored and made this website | v . 01
-->
<html>
<head>
<link rel="stylesheet" href="jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.maximage.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<title>asd</title>
<link rel="stylesheet" href="styling.css"/>
<script type="text/javascript">
jQuery(document).ready(function() {
$(document).on("scroll", function(){
if ($(document).scrollTop() > 100) {
$(".header").addClass("shrink");
} else {
$(".header").removeClass("shrink");
}
});
});
</script>
<script>
$(function (){
$(".rslides").responsiveSlides({
auto: true,
fade: 700,
speed: 1500,
});
});
</script>
</head>
<body>
<header class="header">
<nav>
<h1>asde</h1>
<!--
<ul>
<li><a href="">me</a></li>
<li><a href="">photos</a></li>
<li><a href="">queries</a></li>
<li><a href="">connect</a></li>
</ul>
-->
</nav>
<!--<h2>Cardiff University</h2>-->
</header>
</body>
<!-- <div id="maximage">
</div>-->
<ul class="rslides">
<li><img src="images/home_slideshow/Rugby.jpg" alt="Image of Judgement day, Wales."></li>
<li><img src="images/home_slideshow/Tractor.jpg" alt="Image of our Tractor."></li>
<li><img src="images/home_slideshow/Axe.jpg" alt="Image of an Axe."></li>
</ul>
<div class="footer">
<center>asd</center>
</div>
</html>最佳答案
您将需要一个宽度为 100vw 且高度为 100vh 的元素(可能是 body，但您可以使用任何元素即绝对定位)。然后，将 CSS 属性 background-image 设置为图片 url，将 background-size 设置为 cover。
编辑: 查看我的最小 JSFiddle 示例:https://jsfiddle.net/0vg9omfq/
关于HTML CSS 背景图像保持宽度与浏览器宽度相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38282491/