Setting size for image gallery with variable sizes

Get Started
1

I am having some issues with how to handle size of images in a dynamic gallery of variable sizes. I was using “width=90%” on the images to ensure they would only fill 90% of the alloted space, but this ends up sizing up images that are smaller than what 90% of the alloted space comes out to on a given screen.

What would be the best approach to setting it up so that the width is left unchanged from the image’s actual width except when that is larger than 90% of the alloted space?

2

Make use of the min-width CSS attribute:
CSS min-width property

3

I am not quite following how it would help?

To make the example clearer:

The area which the image is displayed in is between 600 and 800 pixels wide depending on screen resolution. Lets say we’re on a screen wide enough that its 800 pixels wide.

Currently images are given a width=90% attribute so that they don’t come out wider than 720 pixels. The problem is that when their actual width is less than 720 pixels, it sizes them up to 720.

Of course, then it becomes even more complex for it to work on a smaller screen, where the max width would be as low as 540 pixels. Maybe it just isn’t doable?

4

you can write a rule using CSS (not in the markup… besides, we want to keep or mark up CLEAN right?) to scale the image to 90%, up to and including a specific width.

img { width:90% ; /sizes image up to 90% of its containing element/
max-width:720px; /* if 90% x width of container is >720px then the width of the image is set to 720px*/}

Of course, then it becomes even more complex for it to work on a smaller screen, where the max width would be as low as 540 pixels.

I am failing to see the logic on that. You have to think of this as a SINGLE mathematics calculation + SINGLE IF.

the image width= .9*CONATINER_WIDTH [if:that is more 720px, set to 720px]

so it becomes a design question why are you designing so that you would need two different max-widths for an element whose size is beign calculated on a % of its container?

5

Why not just set max-width? E.g.

img {
    max-width: 90%;
    }

Or did I miss something?

cheers,

gary

6

Yes, I was overthinking it. Just max-width applied to IMG elements within a certain div did the trick. Thanks!