ジャンボトロンに大きな画像をどのようにフィットさせることができますか？

私は符号化ブートキャンプのためのトリビアゲームを作っています。私はタイマー、質問、および4つのクリック可能な回答を表示するジャンボトロンをメインの背景画像に持っています。私はそのジャンボトロンで、トリビア銀行の質問（それは対象）に保存されている指定された画像であることを望みます。私は画像を表示することができますが、それは伸び過ぎており、それはタイマー/ quesitons /ボタンを取り除きます。どうやってジャンボトロンのサイズの背景に直接置くことができますか？あなたの代わりにbackground-imageとしてそれを使用できる場合ジャンボトロンに大きな画像をどのようにフィットさせることができますか？

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

出典

2017-03-03 Brad Goldsmith

StackOverflowへようこそ。あなたの質問には、最小限で完全で検証可能な例が含まれていなければなりません。[here's how]（http://stackoverflow.com/help/mcve） – hungerstar

、background-size: cover;と組み合わせてbackground-positionを使用します。はここに私のコードです。 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">

出典

2017-03-03 20:35:31

私は主な背景画像を保持し、それがトリビアの質問に関係するように埋め込まれていることを望んでいた –

@BradGoldsmith主な背景イメージを維持することはどういう意味ですか？複数の背景画像を持つことができます。ページ上に画像要素を作成することができれば、別の要素を作成して背景を与えることができます。 –

ok cool。私はコードに新しいので、ジャンボトロンに入れるのが最も簡単だと思った。しかし、質問に応じて回転する50以上の画像があるので、.jsファイル内のコードはどのように見えますか？ –

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

出典

2017-03-03 21:03:43

これはなんですか？これはあなた自身の質問に対する答えですか？関連情報を追加する必要がある場合は、質問した後で質問を編集できます。 – hungerstar

ジャンボトロンに大きな画像をどのようにフィットさせることができますか？

答えて

関連する問題