Skip to content

Instantly share code, notes, and snippets.

@xavez
Last active October 4, 2015 19:58
Show Gist options
  • Save xavez/2690551 to your computer and use it in GitHub Desktop.
Save xavez/2690551 to your computer and use it in GitHub Desktop.
Responsive Images
<img src="image.jpg" setsrc="image.xml" />
<!-- And your image.xml being something like -->
<img media="screen and (min-width:500px)">
<coords>
<rect width="700" height="550" x="0" y="0" id="square" />
</coords>
<source>image.jpg</source>
</img>
<img media="max-width:500px">
<coords>
<rect width="500" height="500" x="100" y="50" id="square" />
</coords>
<source>image.jpg</source>
</img>
@rhythmus
Copy link

rhythmus commented Mar 2, 2013

Interesting idea!

Have been trying to do something similar, hacking around with css background-size, background-position, html data-attribute, injecting the coords in the back-end.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment