Displaying images at different sizes dynamically?

Get Started
1

I am looking for some suggestions for my image gallery.

The way I want to set it up is with a list of thumbnails that you click through to get to the individual pages for each image. Then you can click the image to get it to open full-size in a separate window, outside of the layout of the page.

The issue is with the display of the individual images within the layout of the page. I have the viewing area of the layout set to vary between 600 and 800 depending on the resolution of the browser. Ideally, I just want to upload an image for the thumbnail page and the full-size image, and use resizing to handle the display on the individual gallery pages.

What would be the best approach to resizing so it uses the maximum amount of space that it can use based off the browser? Is it doable to keep it resolution-dependent?

2

You could simply set the images to width: 100%, then they will scale to fill the viewport:


img {
	width:100%;
}

Works better for pixel than vector images, and you’d want to make sure the image is good quality so that it’s not too pixely on big screens.

I don’t quite see why you want people to click the thumbnail and then the large image. You could use javascript to create a popup of width: 100%, but it’s not a great idea, IMO.

3

The area where the images are displayed doesn’t take up the whole viewport, it uses a minimum of 600 and a maximum of 800 pixels.

Example: http://westeros.org/BoD/

If possible, I want the images to take up as much space as possible between 600 and 800, rather than limiting them to fitting in under 600. I can’t have the thumbnail go straight to displaying just the image outside of the page since they have captions that need to display together with them.

If necessary, I will limit them to fitting into the smallest size I support, which means I’d probably make 500 the max width. But it isn’t possible to set a max width, is it? I wouldn’t want an image that happens to be just 400 wide sized up to 500.

4

The 100% width applies to whatever container the image is in.

I’m still not clear on what your situation is.

The image will have its natural size by default. You could certainly set a max-width, preventing any image from exceeding the maximum column width:


img {
	max-width:800px;
}

Any image wider than 800px would be resized (I think).

You can add captions to gallery images from thumbnails all on the same page, if you like, using simple JS. I just did a few galleries like this last week.

5

Ok, now I follow. :slight_smile: I completely forgot that with the new layout, 90% should work well applied to the image itself.

Thanks, that should do it. :slight_smile: