Fondamenta 5: modellazione della dimensione img al 100% di un div

Uso la Foundation 5 per impostare una pagina di base. Sto cercando di ottenere un pulsante per cambiare l'immagine di sfondo di un certo div. Finora funziona, ma mostra solo una certa area dell'immagine.Fondamenta 5: modellazione della dimensione img al 100% di un div

Questo è il codice che ho finora:

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>

L'obiettivo che voglio raggiungere: voglio avere l'immagine su un formato completo entro il determinato div.

Grazie

fonte

2015-10-28 Jurntje

è necessario aggiungere un background-size ai CSS del div. Qualcosa di simile

background-size: 100% 100%;

background-size: cover;

background-size: contain;

Dovrete cercare ogni modo per vedere che quello che si desidera. In entrambi i casi, lo sfondo si inserisce perfettamente nella div

Spero che questo aiuti

fonte

2015-10-28 14:15:35

potrebbe essere necessario posizionarlo assolutamente troppo. Qualcosa del tipo: 'background-size: cover; posizione: assoluta; inizio: 0; fondo: 0; a sinistra: 0; right: 0; ' –

' background-size: contain; 'può anche essere un'opzione in base a cosa intendi per" 100% ". – BDawg

Sei corretto, @BDawg, lo aggiungerò alla mia risposta –

aggiungere il seguente stile nel file CSS

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

fonte

2015-10-28 14:23:51

Fondamenta 5: modellazione della dimensione img al 100% di un div

risposta

Problemi correlati