1// Image Mixins
2// - Responsive image
3// - Retina image
4
5
6// Responsive image
7//
8// Keep images from scaling beyond the width of their parents.
9.img-responsive(@display: block) {
10  display: @display;
11  max-width: 100%; // Part 1: Set a maximum relative to the parent
12  height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
13}
14
15
16// Retina image
17//
18// Short retina mixin for setting background-image and -size. Note that the
19// spelling of `min--moz-device-pixel-ratio` is intentional.
20.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
21  background-image: url("@{file-1x}");
22
23  @media
24  only screen and (-webkit-min-device-pixel-ratio: 2),
25  only screen and (   min--moz-device-pixel-ratio: 2),
26  only screen and (     -o-min-device-pixel-ratio: 2/1),
27  only screen and (        min-device-pixel-ratio: 2),
28  only screen and (                min-resolution: 192dpi),
29  only screen and (                min-resolution: 2dppx) {
30    background-image: url("@{file-2x}");
31    background-size: @width-1x @height-1x;
32  }
33}
34