फाउंडेशन 5: मेरे आईएमजी आकार को एक div

के 100% होने के लिए स्टाइल करना मैं मूल पृष्ठ स्थापित करने के लिए फाउंडेशन 5 का उपयोग कर रहा हूं। मैं एक निश्चित div की पृष्ठभूमि-छवि को बदलने के लिए एक बटन प्राप्त करने का प्रयास कर रहा हूं। अब तक यह काम करता है, लेकिन यह केवल छवि के एक निश्चित क्षेत्र को प्रदर्शित करता है।फाउंडेशन 5: मेरे आईएमजी आकार को एक div

इस कोड को मैं अब तक है:

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 के भीतर एक पूर्ण आकार पर छवि करना चाहते हैं।

धन्यवाद

स्रोत

2015-10-28 Jurntje

आप div के सीएसएस के लिए एक background-size जोड़ने की जरूरत है। जैसे

background-size: 100% 100%;

या

background-size: cover;

या

background-size: contain;

कुछ आप जो एक तुम चाहते को देखने के लिए हर तरह की कोशिश करनी होगी। किसी भी तरह से, पृष्ठभूमि

आशा div में बड़े करीने से फिट होगा इस

स्रोत

2015-10-28 14:15:35

में निम्नलिखित शैली को जोड़ने बिल्कुल भी स्थित करने के लिए आवश्यकता हो सकती है मदद करता है। कुछ ऐसा: 'पृष्ठभूमि-आकार: कवर; स्थिति: पूर्ण; शीर्ष: 0; नीचे: 0; बाएं: 0; दाएं: 0; ' –

'पृष्ठभूमि-आकार: इसमें शामिल है;' संभावित रूप से" 100% "के अर्थ के आधार पर एक विकल्प भी हो सकता है। – BDawg

आप सही हैं, @BDawg, मैं इसे अपने उत्तर –

अपने सीएसएस फ़ाइल

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

स्रोत

2015-10-28 14:23:51

फाउंडेशन 5: मेरे आईएमजी आकार को एक div

उत्तर

संबंधित मुद्दे