Looking for idea to show image thumbnail size dynamically base on number in li

Hi Guys,

I’m looking for an idea to display thumbnails size dynamically.
Let’s say there’re thumbnails grabbing from a database. I put them in a ul li list. The placeholder div holds 8 images at maximum.

But sometime there are only one, or two, or three, or four… images displayed.
I want the images size to adjust dynamically like if there is one image the thumbnail size should be 300px * 300px.
If there are two image displayed, the size should be 150px * 150px…
And if there are 8 images displayed the thumbnails should be 40px * 40px.

How do I do that.

Thank you,

If you know there are only one to eight images to display, count the results and then a simple switch or if/then statement could be used to determine the size. There’s probably a formula you could write if there might be more than eight at some point, but basically you’ve got five different images sizes based on a single result, two results, three or four results, five or six results, and seven or eight results.

Thank you,
I’m going to try this.

I don’t know how messy it would get accommodating for responsiveness, but it seems something like
img_sz = view-port_width / img_arr_count
might work.

I guess it depends on how many rows are involved - if the images are to be 40x40 when eight are returned, they can’t be on a single row any more as they would overflow.

No, it’s not that small. I just use the size as example because I don’t have an idea to do it yet. It should be large enough so that people don’t have to stare to see the content.

It would be in the sidebar for desktop and at the bottom for mobile devices.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.