Mercurial > nebulaweb3

comparison default/assets/scss/vendors/bootstrap/mixins/_image.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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
10 @mixin img-fluid {
11 // Part 1: Set a maximum relative to the parent
12 max-width: 100%;
13 // Part 2: Override the height to auto, otherwise images will be stretched
14 // when setting a width and height attribute on the img element.
15 height: auto;
16 }
17
18
19 // Retina image
20 //
21 // Short retina mixin for setting background-image and -size.
22
23 @mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
24 background-image: url($file-1x);
25
26 // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
27 // but doesn't convert dppx=>dpi.
28 // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
29 // Compatibility info: http://caniuse.com/#feat=css-media-resolution
30 @media
31 only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
32 only screen and (min-resolution: 2dppx) { // Standardized
33 background-image: url($file-2x);
34 background-size: $width-1x $height-1x;
35 }
36 }