基礎5：私のイメージサイズをスタイリングしてdivの100％にする

私は基礎5を使って基本ページを設定しています。私は特定のdivの背景画像を変更するボタンを取得しようとしています。これまでのところ、これは動作しますが、画像の特定の領域のみが表示されます。基礎5：私のイメージサイズをスタイリングしてdivの100％にする

function cW() { 
 
    document.getElementById("panel").style.backgroundImage = 
 
    "url('https://dl.dropboxusercontent.com/u/36821301/csgo%20backgrounds/crimson-web.jpg')"; 
 
    document.getElementById("panel").backgroundImage.style.maxWidth = "100%"; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Foundation 5 testing</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta charset="utf-8" /> 
 
    <link type="text/css" rel="stylesheet" href="foundation_5.css"> 
 
    <link type="text/css" rel="stylesheet" href="include/foundation.css"> 
 
    <script src="include/foundation.min.js"></script> 
 
    <script src="include/jquery.js"></script> 
 
    <script src="include/modernizer.js"></script> 
 
    <script src="foundation_5.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div class="row"> 
 
    <div class="medium-12 columns"> 
 
     <div id="panel" class="panel"> 
 
     <h1>Foundation Page</h1> 
 
     <p>Resize this responsive page to see the effect!</p> 
 
     <ul class="button-group round"> 
 
      <li> 
 
      <button type="button" class="button" value="cW" onclick="cW()">Crimson Web</button> 
 
      </li> 
 
      <li> 
 
      <button type="button" class="button" value="mF" onclick="mF()">Marble Fade</button> 
 
      </li> 
 
      <li> 
 
      <button type="button" class="button" value="d" onclick="d()">Doppler</button> 
 
      </li> 
 
      <li> 
 
      <button type="button" class="button" value="rC" onclick="rC()">Rust Coat</button> 
 
      </li> 
 
      <li> 
 
      <button type="button" class="button" value="dS" onclick="dS()">Damascus Steel</button> 
 
      </li> 
 
      <li> 
 
      <button type="button" class="button" value="s" onclick="hB()">Hyper Beast</button> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

私が達成したい目標：私は特定のdiv内でフルサイズの画像が欲しい

これは私がこれまで持っているコードです。あなたはdiv要素のCSSにbackground-sizeを追加する必要が

おかげ

出典

2015-10-28 Jurntje

。あなたが欲しいどちら参照するには、それぞれの方法を試してみてよ

background-size: 100% 100%;

または

background-size: cover;

または

background-size: contain;

ような何か。どちらにしても、背景が、これは

出典

2015-10-28 14:15:35

を次のスタイルを追加することができますdivの

希望にきちんとフィットします。何かのように： 'background-size：cover;位置：絶対;トップ：0;下：0;左：0; right：0; ' –

' background-size：contains; 'は、" 100％ "の意味に応じてオプションになる可能性もあります。 – BDawg

あなたは正しいですか、@BDawg、私は答えに追加します –

があまりにも絶対にそれを配置する必要があるかもしれませんあなたのCSSファイルで

#panel{ 
    width:100vw; 
    height:100vh; 
    }

出典

2015-10-28 14:23:51

基礎5：私のイメージサイズをスタイリングしてdivの100％にする

答えて

関連する問題