Ho un sacco di immagini che vorreimostra usando jquery. Ho div e ho usato jquery per popolare i div basati su alcuni criteri node_id. Ad esempio, se node_id è teamA, visualizzo immagini con testo teamA nel nome delle immagini.
Funziona trovare, il problema è che quando Metti le immagini sul corpo del codice HTML, le immagini vengono visualizzate verticalmente fino a quando non c'è spazio sulla pagina principale.
Cosa mi piacerebbe fare questo a seconda deldimensione della finestra del browser, visualizza le immagini in base alla dimensione della finestra del browser. Ad esempio, se la dimensione dell'immagine è 500x500 e la larghezza della finestra del browser è 700, dovrei essere in grado di visualizzare un'immagine per riga. Se la larghezza del browser è 1200, nella finestra del browser dovrebbero esserci 2 immagini per riga.
Per darti un'idea, ho messo il codice html e jquery per mostrarti cosa sto facendo:
<div class="tab-content" id="tabs1">
<div id="team_A" class="team"></div>
<div id="team_B" class="team"></div>
<div id="team_C" class="team"></div>
<div id="team_D" class="team"></div>
</div>
Questo è il codice jquery per visualizzare l'immagine in base a jstree node_id:
var team_A_Img = "http://test.net" + node_id + "-team_A.png";
$(function () {
var myImage = new Image();
$(myImage).load(function () {
$("#team_A").html(myImage);
}).error(function () {
$("#team_A").hide();
}).attr("src", Img_A_Img)
});
Questo lavoro ma ho bisogno di mostrare le immagini basatesulla dimensione della finestra del browser sia verticalmente che orizzontalmente, in base a quanto spazio ho nel browser. Qualcuno può darmi delle idee su come farei questo?
risposte:
3 per risposta № 1Se è possibile specificare la larghezza delle immagini, è possibile renderle mobili in un elemento a livello di blocco. Per esempio:
<div class="tab-content" id="tabs1">
<div id="team_A" class="team"><img src="/images/http://placehold.it/350x150"></div>
<div id="team_B" class="team"><img src="/images/http://placehold.it/350x150"></div>
<div id="team_C" class="team"><img src="/images/http://placehold.it/350x150"></div>
<div id="team_D" class="team"><img src="/images/http://placehold.it/350x150"></div>
</div>
e usa il seguente CSS:
.tab-content {
padding: 0px;
background-color: yellow;
overflow: auto;
}
.team {
float: left;
margin: 0 5px 5px 0;
}
.team img {
display: block;
}
Per far funzionare questo, imposta overflow: auto nel contenitore genitore, specialmente se si desidera utilizzare un colore di sfondo o un'immagine.
È possibile regolare il margine o il riempimento dell'elemento flottato per creare e disegnare grondaie tra le immagini.
Finalmente, io uso display: block sulle immagini per gestire qualsiasi spazio bianco che potrebbe derivare da un elemento in linea.
Per riferimento, vedere: http://jsfiddle.net/audetwebdesign/8FEeM/
1 per risposta № 2
<div class="tab-content" id="tabs1">
<div id="team_A" class="team">
<img src="/images/http://placehold.it/500x500" />
<img src="/images/http://placehold.it/500x500" />
<img src="/images/http://placehold.it/500x500" />
</div>
CSS
.team img{float: left;}
0 per risposta № 3
Nel mio script può fare questo:
$ (". team"). css ({"width": $ (window) .width (), "height": "auto"});