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.
Comments
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.)
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.
Have your elements the same max-height?
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
Hi Abel,
you can use a div over the image. Set the position of the wrapper to relative and the div in an absolute position over it.
EDIT: You can also usa a background image and put a box over it without position: absolute. Check out this post: http://solemone.de/demos/fullsize-background-image-with-css3-background-size/
There is a great plugin for flexible web type: http://fittextjs.com/
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.
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?
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.