Responsive Image Gallery That Maintains Ratio with Faux CSS Cropping?

I’m going to have users upload photos on a web app. these photos could be really any size or aspect ratio. I could try to do a lot of cropping and resizing on the backend, but given that I want to pop up the fullsize image in a modal, I figure maybe it’s easier to simply use some CSS magic to faux crop the images and create responsive thumbnails for the layout which maintain their aspect ratio when the browser is resized.

Here’s the first fiddle I threw together: https://jsfiddle.net/32w76ty0/

The images are cropped and all are the same size but when you resize your browser, they don’t maintain aspect ratio since I’m explicitly setting the height to 200px.

The other solution I found was this: http://cssdeck.com/labs/8ntxpzys

But as you can see on the bottom set of images, they do resize and maintain aspect ratio, but the images have the black borders on each size where they aren’t filling the space.

So… is there any way to do what I want with CSS?

1 Like

Sounds like a job for object-fit: https://css-tricks.com/on-object-fit-and-object-position/

Hmm. Doesn’t look like it has any support in IE at all. I don’t think that will work for me. I can handle IE behaving a little differently but no support at all won’t cut it.

Ah right, sorry. I had thought there was decent support in IE, but I’m obviously thinking of something else. (Jeesh, even Edge isn’t coming to the party. The misery lives on. :grimacing: )

You can add a polyfill for object-fit.

Have you used that before, Paul?

I’m not quite following what it actually does from that blog post. I see it’s supposed to create a responsive grid of images, but the example screenshot he gives doesn’t seem all too appealing visually. The “the results” section on that blog where he shows that the image should fit horizontally or vertically, I’m not sure what he’s showing there? It seems he’s saying the image will fit one way or the other and then there will be white space on one edge of the image depending on how the image or oriented?

deronsizemore,

Can you draw a picture (Photoshop or whatever program you prefer) that shows what you would like the code to do with the images (how you would like two or three rows of image to look when rendered on the page). Be sure to annotate the drawing so the actual dimensions (aspect ratio and size) is known so we can get a visual idea of how you like random sized images from users to be treated.

Can the images be arranged in unequal columns with equal heights? or do you expect the columns to be equal? or can the heights be unequal? It sounds like you would rather the images not be cropped at all, if possible, just scaled.

In the second exampe, those black bars could be white bars but would still appear empty. You could choose to increase the height of that image, but then the “empty bars” would appear above and below the wider images beside it.

I don’t think the problem is realistic, but I may be having a failure of imagination so I’m actually asking more for my benefit than yours.

Thank you.

The big images at the top were the images that were squished and were to show how bad they loook.

In the results section it shows how images behave when 'contain is used which means that the image will be contained within the element but not overflow anywhere just the same as background-size:contain works.

To fill the box fully you would use ‘cover’ which behaves exactly as background-size:cover and will fill the element while maintaining aspect ratio. This of course means the image will need to be enlarged in one direction to overfill the box but the overflow is hidden.

Its exactly the same as background-size:cover (and contain) properties and will do what you want as best as it can be done…

deronsizemore,

Can you draw a picture (Photoshop or whatever program you prefer) that shows what you would like the code to do with the images (how you would like two or three rows of image to look when rendered on the page). Be sure to annotate the drawing so the actual dimensions (aspect ratio and size) is known so we can get a visual idea of how you like random sized images from users to be treated.

Can the images be arranged in unequal columns with equal heights? or do you expect the columns to be equal? or can the heights be unequal? It sounds like you would rather the images not be cropped at all, if possible, just scaled.

In the second exampe, those black bars could be white bars but would still appear empty. You could choose to increase the height of that image, but then the “empty bars” would appear above and below the wider images beside it.

I don’t think the problem is realistic, but I may be having a failure of imagination so I’m actually asking more for my benefit than yours.

Thank you.

In my first example: https://jsfiddle.net/32w76ty0/, that’s essentially what I’m after on a full resolution. If you grab the corner of your browser window and resize it though, you’ll see that the widths scale accordingly (from having a percentage width on the item) but the height just stays static (of course because of the static width). So a grid of images that appear to be equal height and width but then scale when the browser is resized like these do (because of img { max-width: 100%; } ): https://jsfiddle.net/32w76ty0/1/

You can see on that second like that if you resize your browser, the images all scale accordingly. This is what I’m after but I need to be able to crop the images so that they all line up nice and neat since I won’t know what size image a user might actually upload.

Does that make sense?

I can do this with backend code; just figured if there was some CSS that could accomplish it, then I’d go that route.

The big images at the top were the images that were squished and were to show how bad they loook.

In the results section it shows how images behave when 'contain is used which means that the image will be contained within the element but not overflow anywhere just the same as background-size:contain works.

To fill the box fully you would use ‘cover’ which behaves exactly as background-size:cover and will fill the element while maintaining aspect ratio. This of course means the image will need to be enlarged in one direction to overfill the box but the overflow is hidden.

Its exactly the same as background-size:cover (and contain) properties and will do what you want as best as it can be done…

Ok. I guess I can give it a try and see what happens. The images themselves shouldn’t need to be enlarged as the images these users will be uploading will already be plenty large enough; I’m just trying to create thumbnails I guess in a sense but doing so without creating a second copy of the image on the server.

I think in their example (really wish they had a live demo) this is what didn’t seem to make sense: http://i.imgur.com/mQi9OS4.png

I’ve circled the areas where it appears the images aren’t actually filling the entire area? Or was this intentionally done for some reason? This route wouldn’t display images all at the same height and width it doesn’t appear, but as long as things line up, I guess i’m okay with it.

Again, I need to ask if the column widths need to be equal (as shown in your examples). or are unequal widths acceptable? and is JavaScript acceptable?

I would prefer column widths to be equal but I’m not opposed to them being unequal as long as everything fits nicely and scales nicely so I can make things look good at other resolutions. I’m also okay with javascript as long as it works in most browsers.

1 Like

Those two statements don’t sit well together for me. Thumbnails are not just about reducing dimensions to fit the page, but file size is also a consideration.
With multiple hi-res images on one page, you could be looking at some real lag in loading.
Perhaps if the upload script made a small, cropped to aspect, thumbnail copy, you would kill two birds with one stone.
(Though object-fit is a new one for me, that I can definitely see myself using.)

1 Like

I tried numerous thumbnail options and eventually opted to have scale both width and height to fit inside a common container. I also tried different spacing between thumbnails and prefer a certain amount of white space.

This page is still under construction, page titles only available on hover and not available on mobile devices. RWD is not easy :frowning:

http://www.johns-jokes.com/pix/364

I have considered adding alternate CSS skews which is quite effective but looks a bit peculiar on very wide or very tall thumbnails.

Sorry, I was just trying to explain things in a short and concise manner. I’m not going to allow users to willy-nilly upload huge high-resolution images. I realize the pitfalls of that. What I meant by “not knowing what size the image will be” is just that I’m not requiring all uploads to be 200px by 200px for example. I’ll be resizing the image on the backend to reduce the file size so things still load fast, but all the dimensions won’t be the same. I’ll probably resize the width to be consistent and then the hight will just maintain whatever ratio is there so one image may be 400px by 700px and another may be 400px by 400px.

Does that make sense?

Yeah, it seems that this is much more difficult than I thought. I was hoping there was just a simply way to do this with some CSS but it seems there isn’t. I can definitely resize and crop on the backend and then create a thumbnail. That may be easiest just so I can move on.

Thanks.

Looks like you did a nice job. This isn’t exactly what I was after initially but honestly it seems from all the googling that I’ve done and all the responses here that this is about as close as you can get to something like this.

Thanks I’ll check it out can play around with the code.

1 Like

Yes, I understand.
I have not tried it on an image gallery yet, but flex box may be a good option.

Yes, I understand.
I have not tried it on an image gallery yet, but flex box may be a good option.

Ah, yeah. I’ll look into that. thanks.

I did just stumble across this: http://codepen.io/anon/pen/yONrzK

Seems to do what I want even though it does use some javascript to accomplish it. I’m okay with that though.

I explained that in my previous post and those images were created using ‘contain’ which stretechs (or shrinks) the image so that it is wholly within the element. If the image is not square then you will get a gap at the top or the sides depending on its aspect ratio but the whole image will be there inside the element.

If you use ‘cover’ on the other hand then there will be no gaps and the image will be stretched (or shrunk) so that it fully covers the container and still maintains the aspect ratio.

There are no other choices to make an image fit even if you cut them by hand unless you were going to use art direction to cut them with different aspect ratios to match your container. That would still mean cutting away or expanding an image much the same as cover.

It took me about 2 minutes to get the polyfill I mentioned up and running and it seems to do exactly what you want. The only thing that could be improved was if the image could be centred like a background image so that you get the main focal point.

That seems to be much the same as object-fit polyfill I mentioned but without the fallback to css for those that don’t need the js. Although it does look like that one is centred but still ends up cutting the heads off both pictures:)