Javascript 如何将一个大图像添加到jumbotron中？_Javascript_Jquery_Css

Javascript 如何将一个大图像添加到jumbotron中？

javascript jquery css

Javascript 如何将一个大图像添加到jumbotron中？,javascript,jquery,css,Javascript,Jquery,Css,我正在为一个编码训练营做一个琐事游戏，我有一个主要的背景图像，然后是一个显示计时器、问题和4个可点击答案的jumbotron。我希望在那个jumbotron中是一个指定的图像，保存到琐事银行问题中（它是一个对象）。我可以让图像显示出来，但它被过度拉伸了，它拿走了计时器/问题/按钮。我怎么能把它直接放在jumbotrons尺寸的背景中，并让它拉伸以适合它？这是我的密码： function displayNextQuestion() { initialTimer = 21; con

我正在为一个编码训练营做一个琐事游戏，我有一个主要的背景图像，然后是一个显示计时器、问题和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();
}

函数displayNextQuestion（）{
初始计时器=21；
console.log（问题库[triviaQuestions[counter]].question）；
console.log（问题库[triviaQuestions[counter]]。正确答案）；
var questionToDisplay=$（''）.addClass（'question'）.text（问题库[triviaQuestions[counter]].question）；
var answerButtons=$（''）.addClass（'answers'）；
var numberOfAnswers=问题库[triviaQuestions[计数器]].answers.length；
对于（var i=0；i

如果您可以将其用作

背景图像

，请将

背景位置

与

背景尺寸：封面结合使用。如何使用背景位置取决于图像中的内容以及您希望确保显示的部分

正文{
背景：url（'http://eskipaper.com/images/large-2.jpg")不重复;；
背景尺寸：封面；
背景位置：中心；
高度：100vh；
保证金：0；
}

琐事游戏
星球大战琐事

开始
重置
@字体{
字体家族：遥远的银河系；
src:url（“遥远星系/DISTGRG_.ttf”）；
}
身体{
背景图片：url（“background.jpg”）；
背景重复：无重复；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
字体家族：遥远的银河系；
}
h1{
颜色：蓝色；
文本对齐：居中；
字体大小：100px；
文本阴影：1px 1px 0黑色，-1px-1px 0黑色，1px-1px 0黑色，-1px 1px 0黑色，0px 1px 0黑色，0px-1px 0黑色，-1px 0px 0黑色，4px 4px 3px#000；
不透明度：0.5；
}
.col-md-12{
文本对齐：居中；
利润率：2%；
}
.col-md-11{
文本对齐：左对齐；
利润率：2%；
}
琼伯伦先生{
垫面：5%；
垫底：15%；
右边距：15%；
左边距：15%；
不透明度：0.6；
}
.集装箱{
颜色：灰色；
不透明度：0.5；
}
#计时器{
字体大小：30px；
文本对齐：居中；
颜色：黑色；
}
#问题:{
颜色：红色；
文本对齐：居中；
字体大小：30px；
}
#启动btn{
文本对齐：居中；
字体大小：50px；
}
#重置基站{
文本对齐：居中；
字体大小：50px；
}
.btn块{
文本对齐：左对齐；
颜色：蓝色；
}
欢迎来到StackOverflow，您的问题应该包含一个最小、完整且可验证的示例。我希望保留我的主要背景图像，并嵌入第二幅图像，因为它与琐事有关question@BradGoldsmith保留你的主要背景图像是什么意思？您可以有多个背景图像。如果你可以在页面上创建一个图像元素，你可以创建另一个元素并给它一个背景…好的，酷。我对编码是全新的，所以我认为把它放在jumbotron中是最简单的。但是，由于大约有50个左右的图像根据问题旋转，.js文件中的代码是什么样子的？请接受@hungerstar的建议，并给我一个解决方案。JS的外观取决于您的标记（html）和现有布局（css），这是什么？这是对你自己问题的回答吗？请注意，如果需要添加相关信息，可以在提问后编辑问题。
   <!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;
}