display images based on browser width

Question

I have bunch of images that I would like to display using jquery. I have divs and I used jquery to populate the divs based on some node_id criteria. For example, if the node_id

Answer 1

<div class="tab-content" id="tabs1">
<div id="team_A" class="team">
    <img src="http://placehold.it/500x500" />
    <img src="http://placehold.it/500x500" />
    <img src="http://placehold.it/500x500" />
</div>

CSS

.team img{float: left;}

Answer 2

If you can specify the width of the images, you can float them in a block-level element. For example:

<div class="tab-content" id="tabs1">
    <div id="team_A" class="team"><img src="http://placehold.it/350x150"></div>
    <div id="team_B" class="team"><img src="http://placehold.it/350x150"></div>
    <div id="team_C" class="team"><img src="http://placehold.it/350x150"></div>
    <div id="team_D" class="team"><img src="http://placehold.it/350x150"></div>
</div>

and use the following CSS:

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

To make this work, set overflow: auto in the parent container especially if you want to use a background color or image.

You can adjust the margin or padding of the floated element to create and style gutters between images.

Finally, I use display: block on the images to deal with any white space that may result from an inline element.

For reference, see: http://jsfiddle.net/audetwebdesign/8FEeM/

Answer 3

In my script can do this:

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