Responsive image with fixed height

When I’m doing a responsive web design, I try to work on 1200px wide first. Find the max size of image needed and then work on different size from there.

I recently encountered the problem where I need to have the same image height but different width using only 1 image. I need to center the image properly so that it still looks like being cropped properly.

HTML :

CSS :

Update : Flisterz have nice suggestion (using js) http://jsfiddle.net/flisterz/FxTwN/4/

Related Posts

2 Discussion to this post

  1. Daru Sim says:

    Owh, thanks for the suggestion! Great posts you have.

  2. Nikos says:

    Thanks a lot for this post…

Leave a Reply

Your email address will not be published. Required fields are marked *

Search stories by typing keyword and hit enter to begin searching.