Grow your CSS skills. Land your dream job.

Vertical align responsive image

  • # January 24, 2013 at 12:13 pm

    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

    # January 24, 2013 at 12:20 pm

    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?

    # January 24, 2013 at 12:23 pm

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

    Yes that one! my english is letting me down…

    # January 24, 2013 at 12:28 pm

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

    I’ll have a think.

    # February 18, 2013 at 12:59 am

    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/

    # February 18, 2013 at 1:39 am

    Can you use a background image? http://jsfiddle.net/UvVU7/

    # June 21, 2013 at 4:42 pm

    @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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".