jonnow — 2012-04-05T12:09:28-04:00 — #1
I'm styling a blog that allows users to post multiple images up. I would like the images to be in the following format:
1st - large, 2nd - large width, half size. 3rd and 4th - small.
I want to make it easy for the editors to just upload the images and the site take care of resizing as I they (the editors) may not have access/skill/experience with photo editing software
I'm wondering what the best way to size a set of photos would be using only CSS? I was thinking of psuedo children? e.g :first :nth-child(2)??
tom8 — 2012-04-05T17:33:58-04:00 — #2
One way to do this is to set up the sections accordingly and specify the width and height of the images 100%. Click here to see an example.
oddz — 2012-04-05T19:54:29-04:00 — #3
Resizing images by setting width/height combos using CSS is a very poor method. Not to mention it fails miserably when the aspect ratio is unknown. What I would recommend is using a service like sencha io src to resize the images for you. If you want greater control with different aspect ratios apply the images as backgrounds and use background-size: contain. That trick work s incredibly well when image sizes and orientations are unknown yet the images need to "fit" in a container with defined relative or absolute dimensions. If the image is content than you might get slapped for using a background-image but I think it is a worth while trade off. You could always place the images down as normal image tags and hide them if your gun-ho on having actually image tags yet would like to use the power of CSS3 background-size: contain.
jonnow — 2012-04-10T04:54:00-04:00 — #4
Thanks for the response, I'll have a play around.
jonnow — 2012-04-10T05:31:45-04:00 — #5
Oh, I've just found another example of what I am trying to achieve. If you upload multiple images on Facebook (as of 10 April 2012) it displays them in the feed like so:
Thanks for the feedback so far, but is there another way to achieve this?
tom8 — 2012-04-10T06:15:51-04:00 — #6
jonnow — 2012-04-10T06:19:55-04:00 — #7
Yes like that, so the method you proposed previously would suffice, but is it the best way of doing this?
tom8 — 2012-04-10T06:39:21-04:00 — #8
I'm sure there are other ways in which you can get similar effect. Unless you have time to search for a better one, I would just use the one that serves your need and perhaps fine tune it as you go along. You might pick up a few things by doing it.
jonnow — 2012-04-12T11:55:03-04:00 — #9
Thanks for that, decided to just drop it and keep it simple by having one large image.
Thanks for the feedback.
lokeshsingh — 2012-04-19T05:23:39-04:00 — #10
Use Image crop option after uploading and before saving of images.
jonnow — 2012-04-19T09:13:23-04:00 — #11