如何将适合的大图像添加到巨型加速器？
如何将适合的大图像添加到巨型加速器？
提问于 2017-03-04 04:31:57
我正在为一个编码训练营做一个小游戏，我有一个主要的背景图像，然后是一个显示计时器，问题和4个可点击答案的巨型加速器。我希望在那个巨型加速器中是一个指定的图像，保存到琐碎的银行问题中(它是一个对象)。我可以让图像显示出来，但它太过拉长了，而且它拿走了计时器/问题/按钮。我怎么才能直接把它放在巨型加速器的背景中，并让它拉伸以适合它呢？下面是我的代码：
function displayNextQuestion() {
initialTimer = 21;
console.log(questionBank[triviaQuestions[counter]].question);
console.log(questionBank[triviaQuestions[counter]].correctAnswer);
var questionToDisplay = $('<h2>').addClass('question').text(questionBank[triviaQuestions[counter]].question);
var answerButtons = $('<div>').addClass('answers');
var numberOfAnswers = questionBank[triviaQuestions[counter]].answers.length;
for (var i = 0; i < numberOfAnswers; i++) {
var newButton = $('<button>').addClass('answer btn btn-lrg btn-default btn-block').text(questionBank[triviaQuestions[counter]].answers[i])
.data('index', i).on("click", checkAnswer);
answerButtons.append(newButton);
}
$(".jumbotron").empty().append('<img src =' + questionBank[triviaQuestions[counter]].imageUrl + '>');
$('#question').empty().append(questionToDisplay, answerButtons);
// console.log(questionBank[triviaQuestions[counter]].imageUrl);
run();
}回答 2
Stack Overflow用户
发布于 2017-03-04 04:35:31
如果您可以将其用作background-image，请将background-position与background-size: cover;结合使用。如何使用background-position取决于图像中的内容以及您希望确保显示的部分。
body {
background: url('http://eskipaper.com/images/large-2.jpg') no-repeat;
background-size: cover;
background-position: center center;
height: 100vh;
margin: 0;
}
如果您使用的是图像，则可以使用object-fit属性，但不能很好地支持- http://caniuse.com/#feat=object-fit
body {
margin: 0;
}
img {
object-fit: cover;
height: 100vh;
width: 100%;
display: block;
}<img src="http://eskipaper.com/images/large-2.jpg">
Stack Overflow用户
发布于 2017-03-04 05:03:44
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TriviaGame</title>
<!-- We link our html to the Bootstrap CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<h1>STAR WARS TRIVIA</h1>
<div class="container">
<div class="jumbotron">
<div class="row">
<p id="timer"></p>
</div>
<div id="question">
</div>
<button class="btn btn-default btn-block" id="start-btn">START</button>
<button class="btn btn-default btn-block" id="reset-btn">RESET</button>
</div>
</div>
<script src="assets/javascript/game.js"></script>
</body>
</html>
@font-face {
font-family: distant-galaxy;
src: url("Distant-Galaxy/DISTGRG_.ttf");
}
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: distant-galaxy;
}
h1 {
color: blue;
text-align: center;
font-size: 100px;
text-shadow: 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 0px 1px 0 black, 1px 0px 0 black, 0px -1px 0 black, -1px 0px 0 black, 4px 4px 3px #000;
opacity: 0.5;
}
.col-md-12 {
text-align: center;
margin: 2%;
}
.col-md-11 {
text-align: left;
margin: 2%;
}
.jumbotron {
padding-top: 5%;
padding-bottom: 15%;
margin-right: 15%;
margin-left: 15%;
opacity: 0.6;
}
.container {
color: grey;
opacity: 0.5;
}
#timer {
font-size: 30px;
text-align: center;
color: black;
}
#question {
color: red;
text-align: center;
font-size: 30px;
}
#start-btn {
text-align: center;
font-size: 50px;
}
#reset-btn {
text-align: center;
font-size: 50px;
}
.btn-block {
text-align: left;
color: blue;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42587955
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号