背景圖片大小調整

試圖修復我的身體圖像，以便它根據瀏覽器窗口縮放。一切都在頁面上，但希望它始終適合頁面而不滾動。我嘗試使用一些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>

來源

2016-10-01 mkeigwin

不要使用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>

來源

2016-10-01 15:57:31 andreas

使用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>

來源

2016-10-01 16:00:10

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

來源

2016-10-01 16:04:28

背景圖片大小調整

回答

相關問題