我正在为一个编码训练营制作一个琐事游戏,我有一个主背景图像,然后是一个巨型计时器,其中显示了一个计时器,问题和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-positionbackground-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">

关于javascript - 我如何将适合大图像的图像添加到超长波管中?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42587955/

10-12 12:53
查看更多