CODEWITHSUNDEEP
javascripthtmlcss
user1752759
user1752759

Reputation: 643

Grid-like, Multiple Responsive Images

I'm currently putting together a showcase website, where in the main content area there needs to be a number of images/items, layed out in a box-like-sequence next to and on top of each other...

http://jsfiddle.net/bdv3t/

How would I go about making it so that when the browser window is brought in and made smaller, that each of these images/items gradually scales down and fits proportionality to the container that it is in (so on a large screen there are roughly 8 images/items left to right, which would be the same as on a smaller screen, only the dimensions of each of the images are smaller)?

I've had a look into using responsive images such as this and this but with no luck, as it makes only the one image full-width. If I can, I'd like to avoid using tables and prefer a CSS-HTML method over a JS, but if all else fails, a JS method should suffice.

Upvotes: 2

Views: 734

Answers (4)

Chris Jaynes
Chris Jaynes

Reputation: 2907

If you're interested in having multiple sources for the images, so they can scale up more pleasantly, you might want to try one of these:

Upvotes: 0

user1752759
user1752759

Reputation: 643

Obviously this can be reworked, but something along the lines of...

http://jsfiddle.net/LAWNQ/

Upvotes: 0

Ed Bayiates
Ed Bayiates

Reputation: 11220

Include jQuery in your page, e.g.:

<script src="jquery-latest.js"></script>

Add a class to all of your puzzle pieces, e.g.:

<li><img class="pieces" src="http://dummyimage.com/200x200/000/fff" alt="1" width="200" height="200"/></li>
<li><img class="pieces" src="http://dummyimage.com/200x200/000/fff" alt="1" width="200" height="200"/></li>
// etc.

Include something like this JavaScript (this one will make your puzzle pieces 1/5 of the window size):

$(document).ready(function() {
    $(window).on("resize", function() {
        $(".pieces").width($(window).width() / 5).height($(window).height() / 5);
    });
});

I tested this with your Fiddle and it worked fine. To include jQuery in your Fiddle, select it on the left as the framework (e.g., jQuery 1.7.2). Then add the class name to the pieces and the script in the JavaScript box. Test until you get the exact behavior you want.

Edit: If you want to minimize pixel distortion, have a number of different image sizes and reset the image source just before resizing, to the closest size available. For example, let's say you have 400x400, 300x300, 200x200, 100x100, and 50x50 image sizes for your tiles. The JavaScript would change to something like: 

$(document).ready(function() {
    updatePieceSize = function() {
        var side, imgSize, src;

        side = Math.min($(window).width(), $(window).height()) / 5;

        if (side >= 350) {
            imgSize = "400x400";
        } else if (side >= 250) {
            imgSize = "300x300";
        } else if (side >= 150) {
            imgSize = "200x200";
        } else if (side >= 75) {
            imgSize = "100x100";
        } else {
            imgSize = "50x50";
        }
        src = "http://dummyimage.com/" + imgSize + "/000/fff";

        $(".pieces").attr("src", src).width(side).height(side);        
    };

    $(window).on("resize", updatePieceSize);
    updatePieceSize();
});

Upvotes: 1

Prateek
Prateek

Reputation: 4013

Edited fiddle just check and if you want something else then reply.

@media queries solution.

Upvotes: 0

Related Questions