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