Skip to content

Instantly share code, notes, and snippets.

@JoostKiens

JoostKiens/compass-HiDPI-images.scss

Last active December 10, 2015 23:38
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JoostKiens/4510904 to your computer and use it in GitHub Desktop.
Save JoostKiens/4510904 to your computer and use it in GitHub Desktop.
Download ZIP
Cross-browser, slimmed-down Compass media query mixin for high-density images.
Raw
compass-HiDPI-images.scss
/**
* Author: @joostkiens
* Licensed under the MIT license
*/
@mixin hr-image($lr-image, $hr-image) {
background-image: url($lr-image);
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(-o-min-device-pixel-ratio: 5/4),
(min-resolution: 120dpi) {
background-image: url($hr-image);
background-size: image-width($lr-image) image-height($lr-image);
}
}
@aficiomaquinas
Copy link

Ultra cool. Thanks!

@hasft
Copy link

hasft commented Jul 4, 2013

yay

Copy link

ghost commented Dec 26, 2013

Nice thx!

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