我正在为一个编码训练营制作一个琐事游戏,我有一个主背景图像,然后是一个巨型计时器,其中显示了一个计时器,问题和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();
}
最佳答案
如果可以将其用作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-fitbody {
margin: 0;
}
img {
object-fit: cover;
height: 100vh;
width: 100%;
display: block;
}
<img src="http://eskipaper.com/images/large-2.jpg">
关于javascript - 我如何将适合大图像的图像添加到超长波管中?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42587955/