Display Images Based On Browser Width

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 is

Solution 1:

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

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

and use the following CSS:

.tab-content {
    padding: 0px;
    background-color: yellow;
    overflow: auto;
}
.team {
    float: left;
    margin: 05px5px0;
}
.teamimg {
    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/

Solution 2:

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

CSS

.teamimg{float: left;}

Solution 3:

In my script can do this:

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