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

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

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/