This is a CSS-only implemantation of responsive images and art direction. There are four classes: art-center, art-top-left, art-top-right, art-bottom-left, and art-bottom-right to use in different situations.
The following caveats exist for this technique:
It depends on vmin and transform to make things happen. Sorry, IE8!
The centered class doesn't really center it all the way. That needs to be fixed.
The only breakpoint is set at 40em. There could theoretically be more added.
A large image is still loaded on mobile. Might consider combining with a backend responsive images solution.
I haven't tested it in anything but Chrome on Mac.
No art directionArt direction: art-centerArt direction: art-top-leftArt direction: art-top-rightArt direction: art-bottom-leftArt direction: art-bottom-right
