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.
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.
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
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?
"middle portion of the image centred in the height of the li"
Yes that one! my english is letting me down...
Hmmm...I'm not sure you can do that for responsive images.
I'll have a think.
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/
Can you use a background image? http://jsfiddle.net/UvVU7/