відображення зображень на основі ширини браузера - jquery, html, css

У мене є купа зображень, які я хотів бивідображення за допомогою jquery. У мене є div, і я використовував jquery для заповнення div на основі деяких критеріїв node_id. Наприклад, якщо ідентифікатором вузла є teamA, я відображаю зображення, що містять текст teamA в назві зображень.

Працює знайти, проблема полягає в тому, що при розміщенні зображень на тілі html зображення відображаються вертикально, поки на головній сторінці не залишається місця.

Що я хотів би зробити це залежно відрозмір вікна браузера, відображати зображення залежно від розміру вікна браузера. Наприклад, якщо розмір зображення 500x500, а ширина вікна браузера 700, я повинен мати можливість відображати одне зображення на рядок. Якщо ширина браузера 1200, у вікні мого браузера має бути 2 зображення на рядок.

Щоб дати вам уявлення, я поклав html і jquery код, щоб показати вам, що я роблю:

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

Це код jquery для відображення зображення на основі 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)

});

Це працює, але мені потрібно показати зображення на основіна розмір вікна браузера або вертикально, або горизонтально, залежно від того, скільки місця у мене в браузері. Хтось може дати мені ідеї, як я це можу зробити?

Відповіді:

3 для відповіді № 1

Якщо ви можете вказати ширину зображень, ви можете перемістити їх у елемент рівня блоку. Наприклад:

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

і використовуйте наступний CSS:

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

Щоб зробити цю роботу, встановіть overflow: auto у батьківському контейнері, особливо якщо ви хочете використовувати колір фону або зображення.

Ви можете налаштувати поле або відступ плаваючого елемента для створення та стилізації жолобів між зображеннями.

Нарешті, я використовую display: block на зображеннях, щоб мати справу з будь-яким пробілом, який може бути результатом вбудованого елемента.

Для довідки див. http://jsfiddle.net/audetwebdesign/8FEeM/

---

1 для відповіді № 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 для відповіді № 3

У моєму сценарії я можу зробити це:

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

---