Responsive Web Design: Overflow Image with vertical centering

in | one comment

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.)

Leave a Reply

Please fill all the fields with the red star *