Resizing images on a blog post

Get Started
1

Hi everyone,

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)??

Many thanks!

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.

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.

4

Thanks for the response, I’ll have a play around.

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?

Many thanks

6

Like so?

7

Yes like that, so the method you proposed previously would suffice, but is it the best way of doing this?

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.

9

Thanks for that, decided to just drop it and keep it simple by having one large image.

Thanks for the feedback.

10

Use Image crop option after uploading and before saving of images.

11

Cheers guys!