Mercurial > nebulaweb3
diff default/assets/scss/vendors/bootstrap/mixins/_image.scss @ 0:1d038bc9b3d2 default tip
Up:default
author | Liny <dev@neowd.com> |
---|---|
date | Sat, 31 May 2025 09:21:51 +0800 |
parents | |
children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/default/assets/scss/vendors/bootstrap/mixins/_image.scss Sat May 31 09:21:51 2025 +0800 @@ -0,0 +1,36 @@ +// Image Mixins +// - Responsive image +// - Retina image + + +// Responsive image +// +// Keep images from scaling beyond the width of their parents. + +@mixin img-fluid { + // Part 1: Set a maximum relative to the parent + max-width: 100%; + // Part 2: Override the height to auto, otherwise images will be stretched + // when setting a width and height attribute on the img element. + height: auto; +} + + +// Retina image +// +// Short retina mixin for setting background-image and -size. + +@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) { + background-image: url($file-1x); + + // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio, + // but doesn't convert dppx=>dpi. + // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard. + // Compatibility info: http://caniuse.com/#feat=css-media-resolution + @media + only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx + only screen and (min-resolution: 2dppx) { // Standardized + background-image: url($file-2x); + background-size: $width-1x $height-1x; + } +}