Vertical align responsive image

[S_Honderdos]

Hi,

I’m trying to vertical align (center) a responsive image withing a fixed height ul. It will be for a client site so i have no control over the actual pixel size of the image. It is in a UL because I want to use flexslider.

Any tips/tricks/directions?

Thanks!

Codepen:
http://codepen.io/S_Honderdos/pen/JlECx

[Paulie_D]

When you say ‘vertical align’ what are you referring to?

Do you mean than you want to show the ‘middle portion of the image centred in the height of the li?

[S_Honderdos]

“middle portion of the image centred in the height of the li”

Yes that one! my english is letting me down…

[Paulie_D]

Hmmm…I’m not sure you can do that for **responsive** images.

I’ll have a think.

[thefrontender]

Had to figure this one out for a tablet project recently: we needed a fluid/responsive grid of images but couldn’t guarantee that the images would be the same size or aspect ratio.

Here’s my solution for vertically centred, responsive images in a container with a fixed aspect ratio http://jsfiddle.net/thefrontender/KQ36Z/2/

[ashblueX]

@thefrontender you’re a genius! The code only works with images that are too wide. I’ve adjusted it to work with ones that are too wide and high.

http://codepen.io/ashblue/pen/uzkgl

[Author]

Posts