wyświetlaj obrazy na podstawie szerokości przeglądarki - jquery, html, css

Mam kilka zdjęć, które chciałbymwyświetlanie za pomocą jquery. Mam div i użyłem jquery do wypełnienia div na podstawie niektórych kryteriów node_id. Na przykład, jeśli node_id to teamA, wyświetlam obrazy, które mają tekst teamA w nazwie obrazów.

To działa, problem polega na tym, że kiedy umieszczasz obrazy na ciele HTML, obrazy są wyświetlane pionowo, dopóki nie ma miejsca na stronie głównej.

Co chciałbym zrobić w zależności odrozmiar okna przeglądarki, wyświetlaj obrazy w zależności od rozmiaru okna przeglądarki. Na przykład, jeśli rozmiar obrazu wynosi 500 x 500, a szerokość okna przeglądarki wynosi 700, powinienem być w stanie wyświetlić jeden obraz w linii. Jeśli szerokość przeglądarki wynosi 1200, w oknie przeglądarki powinny znajdować się 2 obrazy na linię.

Aby dać ci pomysł, umieściłem kod html i jquery, aby pokazać ci, co robię:

<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>

Jest to kod jquery do wyświetlania obrazu na podstawie 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)

});

Te prace, ale muszę pokazać obrazy opartew rozmiarze okna przeglądarki w pionie lub poziomie, w oparciu o ilość miejsca w przeglądarce. Czy ktoś może dać mi pomysły, jak bym to zrobił?

Odpowiedzi:

3 dla odpowiedzi № 1

Jeśli możesz określić szerokość obrazów, możesz je unosić w elemencie blokowym. Na przykład:

<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>

i użyj następującego CSS:

.tab-content {
padding: 0px;
background-color: yellow;
overflow: auto;
}
.team {
float: left;
margin: 0 5px 5px 0;
}
.team img {
display: block;
}

Aby wykonać tę pracę, ustaw overflow: auto w kontenerze nadrzędnym, zwłaszcza jeśli chcesz użyć koloru tła lub obrazu.

Możesz dostosować margines lub dopełnienie elementu pływającego, aby tworzyć i stylizować rynny między obrazami.

Wreszcie używam display: block na obrazach, aby poradzić sobie z każdą białą spacją, która może wynikać z elementu wstawianego.

Dla odniesienia zobacz: http://jsfiddle.net/audetwebdesign/8FEeM/

---

1 dla odpowiedzi nr 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 dla odpowiedzi № 3

W moim skrypcie można to zrobić:

$ (". team"). css ({"width": $ (window) .width (), "height": "auto"});

---