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.
<img src="http://izuddinhelmi.com/wp-content/uploads/2012/06/event1.jpg" alt="image title" >
max-width: 920px; //only set this if using Twitter Bootstrap
margin-left: -460px; //half of the image size