Skip to content

Instantly share code, notes, and snippets.

@xavez

xavez/image.xml

Last active October 4, 2015 19:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xavez/2690551 to your computer and use it in GitHub Desktop.
Save xavez/2690551 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Images
Raw
image.xml
<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