Responsive Web Design: Overflow Image with vertical centering

If you want to use an image in your responsive web design you can use fluid images. But there is another way. You can set a maximum height and crop the image. If you want to learn more about it, check out the tutorial that I wrote about the overflow image cropping.

View Demo & Code

Screenshot of the tutorial about overflow image crop in Responsive Web Design

Comments

  1. «Joey Hoer» said on :

    Spent forever trying to figure out why my round corners weren’t clipping the image in Safari and Chrome, while yours was working fine. Turns out it’s related to webkits handling of positioned elements. It was driving me crazy, but this script is great. (There may be a minor jump when the image loads if you don’t apply a transition.)

  2. «ericB» said on :

    Thank you so much for this. I am trying to use this with a photo grid where the images are floated left and placed right next to each other one after the other. It works for me, however when you resize the browser window the margin-top overlay adds a horizontal gap in between photos that are stacked on top of each other.

    Hope that makes sense, basically I have 2 rows of images that are floated left in a grid and I want the images to always be centered like your technique here.

  3. «solemone» said on :

    Have your elements the same max-height?

  4. «Abel McBride» said on :

    Is there a way to put elements on top of the example you did in your post Responsive Web Design: Overflow Image with vertical centering? If so, how would you go about putting a shadow, box for text to sit on, and text on top of it? I’m trying to get an effect similar to this page http://elevationchurch.org/learn-more where the text is over an image that stretches across the entire screen and responds responsively and then once it hits a certain break point the content and image separate into what appears to be 2 different sections. If you have any suggestion I would appreciate it. Thanks

  5. «Abel McBride» said on :

    Thank you so much for your quick reply it was a huge help. I was able to get the image the way I wanted and the div over the image. The problem I’m having now is that the image is not showing up on any iOS devices. Also, I’m trying to set a breakpoint that tells the image and div to separate just like they do @ http://elevationchurch.org/learn-more when you resize the canvas to around phone size. Any suggestions would be greatly appreciated. Thanks again.

  6. «Gus» said on :

    Hi, Solemone. This is really what I need, except that I want it to crop on the sides but not on the top or bottom. Is there a simple fix for that?

  7. «solemone» said on :

    Hi Gus,
    maybe this will be in the upcoming update of the script. If you want to try it for yourself, I think you can change the height to a fixed value and use max-width. Then you have to calculate the overlap like this: overlap = (wrapperWidth - imageWidth) / 2; and set the margin-left to that overlap.

Leave a Reply

Please fill all the fields with the red star *