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! :)

Two ways to do this without using Javascript:

using <picture> tag for images

As @krazzeniru20 explained in his answer, you can use the <picture> tag in your markup which goes something like this:

<picture alt="description of image">    
      <!-- low-res, default -->
      <source src="small.jpg" media="(min-width: 400px)">

      <!-- high-res -->
      <source src="large.jpg" media="(min-width: 800px)">

      <!-- Fallback content -->
      <img src="small.jpg" alt="description of image">    
</picture>

Here, the image mentioned inside the <source> tag would load up as the browser hits the breakpoint mentioned in its media attribute, which is pretty simple and straightforward.

more info here: css-tricks.com/on-responsive-images/

Another way to do this would be:

using srcset attribute with img

If, on responsive screens, you are switching between different versions of the same image, you can just put in an srcset attribute on the <img> tag.

here's the syntax:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="description">

More info here: css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

So.. the question arises, When to use what?

Here's a little help with that :

The reason that image tag with srcset would need different variants of same images is cause the browser actually calculates and load up the best possible image for the user's screen size instead of just replacing the image for a breakpoint.

If you are trying to show a different image for a different breakpoint, <picture> is the solution for you. <picture> with explicit sources, the browser has to do exactly what you say and not make choices for itself.

Hope it helps! 😊

http://cloudinary.com/ does this very well if you don't mind using a 3rd party service. Images processed by it can be both responsive and have a gravity. An added bonus is that cloudinary will also scale the image to the device so mobile devices aren't being sent desktop sized images.