2

On a webpage I am rendering a collection of images. Some images are portrait orientation, some are landscape, all are larger than the desired render size.

I want to display these images in a gallery of neat, uniformly sized, square thumbnails.

How can I do thus using only CSS?

I would like to avoid a javascript library if possible. I don't need to select a part of the image to display, just any central-ish square area.

I've seen this question asked elsewhere, but have not yet found an answer that seems to work with all orientations (e.g., portraits may get correctly cropped/resized, landscapes do not).

Andy Harvey
  • 12,333
  • 17
  • 93
  • 185
  • 1
    This could help you: http://stackoverflow.com/questions/16352774/is-it-possible-to-render-an-image-in-two-sizes-with-correct-proportion/16352853#16352853 – Arbel May 14 '13 at 02:19
  • Using CSS only to create thumbnails is generally a bad idea. The browser still has to download the full sized image and then it just dynamically shrinks it. You should look into using a server side language that will actually resize the image on the fly in order to keep download speeds as quick as possible. – FireCrakcer37 May 14 '13 at 02:41
  • thanks @FireCrakcer37, unfortunately the images are from an external API so I have no server side control – Andy Harvey May 14 '13 at 03:18
  • thanks for these great suggestions. So to confirm, it is not possible to resize an image directly on the image tag? I must use an enclosing div and/ or apply the image as a background? – Andy Harvey May 14 '13 at 05:01
  • It is not very easy to get the desired result by utilizing an `image` tag. It might be possible if all the images were landscape or portrait, but since you have a mix of both it is difficult to alter the image to really fit your needs. Is there any particular reason you would like to utilize image tags? – FireCrakcer37 May 14 '13 at 05:36
  • img tags are semantically more appropriate in this case, and would allow for alt tags, etc. Also the images are hyperlinked, and I dont believe that `
    ` is valid syntax prior to html5? Also this content is generated dynamically, so not ideal to place this in a CSS file. None of these are insurmountable problems, I just hoped that there was a cleaner way to accomplish this.     – Andy Harvey May 14 '13 at 06:57
  • If you would like to retain the link ability of the divs [This Answer](http://stackoverflow.com/a/8030356/1326503) explains how to put an empty tag inside the div and make the entire thing a link. I agree that semantically it makes more sense to use an tag; however, to get the proper styling, I cannot think of a way to do it. – FireCrakcer37 May 14 '13 at 08:02

2 Answers2

6

You could still use server side technology to resize the image via cURL; however, that is neither here nor there. One thing to understand, CSS is not really a programming language, as in, it cannot make decisions or do any real math, so we can't make dynamic decisions with just CSS.

That being said, you could create divs for your gallery, and use CSS to set the background image to the desired image. In CSS3 there is a property called background-size. You can set the size in pixels manually, but it will not maintain aspect ratio that way, so it will probably look awful. Setting the background-size: cover will scale the image so that it completely fills the background area while cutting off the excess. Setting background-size: contain will scale the image so that it maintains its original aspect ratio and fills the background without cutting off the image. Here is a little code that kind of explains how to use it. jsFiddle

EDIT: I forgot to mention that this solution will only work in IE9+ (should work fine in FF, Chrome and Safari)

FireCrakcer37
  • 981
  • 10
  • 18
  • thanks, this is a good solution and, while not what I had originally in mind, it does the job very well. Thanks! – Andy Harvey May 14 '13 at 07:47
1

I suggest having a div wrap the images. You can specify a width and height on this wrapper with a overflow:hidden.

ArleyM
  • 855
  • 5
  • 15
  • With this approach you are limited to capturing the top-left piece of the image only, unless you apply some positioning hacks to the original image (which will still be full sized) to move the center of the image into the visible area (way to much work, and would likely be different for each image). – FireCrakcer37 May 14 '13 at 05:41
  • Or even some "responsive" type treatment like `max-width:100%;` – ArleyM May 14 '13 at 12:35