Question

我的网站有背景图片，但背景似乎与浏览器大小相同。我将在下面的照片中解释我想要解释的内容。

顶部图像显示背景适合浏览器，而第二个图像，背景不适合，因为浏览器已被剪切到左侧并且尺寸减半。这里，我不希望在背景图像之间添加空白，而是希望将其缩放到图像中。

我不确定这可能是什么问题，谢谢你的帮助。

@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>

Answer 1

您需要一个宽度为100vw且高度为100vh的元素（可能为body，但您可以使用绝对定位的任何元素）。然后，将CSS属性background-image设置为图片网址，将background-size设置为cover。

编辑：检查我的最小JSFiddle以获取示例：https://jsfiddle.net/0vg9omfq/

HTML CSS背景图像的宽度与浏览器

1 个答案: