One way of doing this would be using external services (like http://www.responsivebreakpoints.com/) which would create separate images for each breakpoint and then you can use separate images for each breakpoint (see this article on css-tricks: https://css-tricks.com/on-responsive-images/ and this on Smashing Magazine: smashingmagazine.com/2016/01/responsive-image-bre…).
Interchange (http://zurb.com/playground/foundation-interchange) from Zurb Foundation applies this strategy.
Other reference regarding this technique can be found here: css-tricks.com/video-screencasts/133-figuring-res…
If you don't want to proceed in that path, you can tweak your CSS to fit in your requirements. The complete solution with explanation can be found here (https://css-tricks.com/crop-top/).
Using this technique, you can actually focus on a certain point of your image.
Hope that it helps! :)