Размер фонового изображения

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>

0

javascript html jquery css sizing

Источник

user6909066 01 окт '16 в 15:47

3 ответа

Другие вопросы по тегам javascript html jquery css sizing

user4534940 01 окт '16 в 16:04 2016-10-01 16:04 · Answer 1 · 2016-10-01 16:04

Это то, что вы хотите?

/* 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;*/
}

user4952806 01 окт '16 в 15:57 2016-10-01 15:57 · Answer 2 · 2016-10-01 15:57

Не используйте 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>

user4945468 01 окт '16 в 16:00 2016-10-01 16:00 · Answer 3 · 2016-10-01 16:00

Использование background-size а также overflow-y для достижения этой цели.

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

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;
}

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