Question

尝试修复我的身体图像，使其根据浏览器窗口进行缩放。一切都在页面上，但希望它始终适合页面而不滚动。我尝试使用一些javascript来解决问题，但是没有工作，所以取消了它，但仍然在那里供你参考。

// function set_body_height() {
//     $('body').height($("window").height());
//   }
//   $("window").ready(function() {
//     $("window").bind('resize', set_body_height);
//   });

html{
  background-color: black;
}
button {
  font-size: 30px;
  background-color:red;
  text-decoration: none;
  border-radius: 10px;
  color: green;
  position: absolute;
  top: 80%;
   left: 0;
}
h1 {
  position: absolute;
  top: 10%;
   margin: 0 auto;
   font-size: 5vw;
}

img {
background: url(http://images.buzzillions.com/images_products/07/02/iron-horse-maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
    background-repeat: no-repeat;
    /*background-position: center center;
    background-attachment:fixed;*/

width: 100%;
  position: absolute;
  top: 0;
  left: 0;


  /*max-height: 99%;
  max-width: 99%;
  object-fit: contain;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;*/
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>MATT'S Running Game</title>
  <link rel="stylesheet" href="styleIndex.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="app.js"></script>

</head>
<body>
 <img src="http://www.freevector.com/uploads/vector/preview/16619/FreeVector-Angry-Birds-Characters-1.jpg" />
<h1>Matt's Angry Bird Rip-Off Game</h1>
  <button><a href="game.html" style="text-decoration:none">Start</a></button>

</body>
</html>

Answer 1

不要在background-image标记本身上使用img属性，因为这不起作用。只需使用它，例如在body标记上。这样，您就可以应用background-size: cover;规则，这样可以在没有滚动条的情况下响应您的背景。

body {
  background-image: url(http://www.freevector.com/uploads/vector/preview/16619/FreeVector-Angry-Birds-Characters-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}
button {
  font-size: 30px;
  background-color: red;
  text-decoration: none;
  border-radius: 10px;
  color: green;
  position: absolute;
  top: 80%;
  left: 0;
}
h1 {
  position: absolute;
  top: 10%;
  margin: 0 auto;
  font-size: 5vw;
}

<h1>Matt's Angry Bird Rip-Off Game</h1>
<button>
  <a href="game.html" style="text-decoration:none">Start</a>
</button>

Answer 2

使用background-size和overflow-y来实现此目标。

＆＃13;

// function set_body_height() {
//     $('body').height($("window").height());
//   }
//   $("window").ready(function() {
//     $("window").bind('resize', set_body_height);
//   });

＆＃13;

html {
  background-color: black;
}
body {
  overflow-y: hidden;
}
button {
  font-size: 30px;
  background-color: red;
  text-decoration: none;
  border-radius: 10px;
  color: green;
  position: absolute;
  top: 80%;
  left: 0;
}
h1 {
  position: absolute;
  top: 10%;
  margin: 0 auto;
  font-size: 5vw;
}
img {
  background: url(http://images.buzzillions.com/images_products/07/02/iron-horse-maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
  background-repeat: no-repeat;
  background-position: center center background-size: cover;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>MATT'S Running Game</title>
  <link rel="stylesheet" href="styleIndex.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="app.js"></script>

</head>

<body>
  <img src="http://www.freevector.com/uploads/vector/preview/16619/FreeVector-Angry-Birds-Characters-1.jpg" />
  <h1>Matt's Angry Bird Rip-Off Game</h1>
  <button><a href="game.html" style="text-decoration:none">Start</a>
  </button>

</body>

</html>

＆＃13;

Answer 3

this你想要的是什么吗？

/* Styles go here */

html{
  background-color: black;
}
button {
  font-size: 30px;
  background-color:red;
  text-decoration: none;
  border-radius: 10px;
  color: green;
  position: absolute;
  top: 80%;
   left: 0;
}
h1 {
  position: absolute;
  top: 10%;
   margin: 0 auto;
   font-size: 5vw;
}

img {
background: url(http://images.buzzillions.com/images_products/07/02/iron-horse-maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
    background-repeat: no-repeat;
    /*background-position: center center;
    background-attachment:fixed;*/
  height:100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size:cover;


  /*max-height: 99%;
  max-width: 99%;
  object-fit: contain;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;*/
}

背景图像大小

3 个答案: