Skip to content

Instantly share code, notes, and snippets.

@lbineau
Last active January 4, 2018 09:14
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 lbineau/dad8c60269b644fddfcd19e9614ac71c to your computer and use it in GitHub Desktop.
Save lbineau/dad8c60269b644fddfcd19e9614ac71c to your computer and use it in GitHub Desktop.
If you need to crop and scale an image in Internet Explorer and provide support back to IE9, you can do that by wrapping the image in an <svg>, and using the viewBox and preserveAspectRatio attributes to do what object-fit and object-position do. Snippet from the great Sara Soueidan blog http://www.sarasoueidan.com/blog/svg-object-fit/
<svg width="x" height="y"
viewBox="0 0 imgX imgY"
preserveAspectRatio="<align> <meetOrSlice>"
aria-labelledby="title" aria-role="img">
<title id="title"> img alt here &ly;/title>
<image xlink:href="..." width="100%" height="100%">
</image>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment