Question

我正在制作一个用于编码训练营的琐事游戏，我有一个主背景图像，然后是一个显示计时器，问题和4个可点击答案的jumbotron。我希望在那个jumbotron中成为一个保存到琐事银行问题的指定图像（它是一个对象）。我可以显示图像，但它已经过度拉伸，它会带走计时器/问号/按钮。我怎样才能直接将它放在jumbotrons尺寸的背景中并让它伸展以适应它？这是我的代码：

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

Answer 1

如果您可以将其用作background-image，请将background-position与background-size: cover;结合使用。您如何使用background-position取决于图像中的内容以及您希望确定要显示的部分。

＆＃13;

body {
  background: url('http://eskipaper.com/images/large-2.jpg') no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100vh;
  margin: 0;
}

＆＃13;

如果您正在使用图片，则可以使用object-fit属性，但不受支持 - http://caniuse.com/#feat=object-fit

＆＃13;

body {
  margin: 0;
}
img {
  object-fit: cover;
  height: 100vh;
  width: 100%;
  display: block;
}

＆＃13;

<img src="http://eskipaper.com/images/large-2.jpg">

＆＃13;

Answer 2

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

我怎样才能将大图像添加到一个超大屏幕？

2 个答案: