image-height and image-width functions for CSS
npm install gulp-css-image-dimensionsThis plugin is meant as a drop-in replacement for the image-width and image-height functions from
Compass.
First, install gulp-css-image-dimensions as a development dependency:
``shell`
npm install --save-dev gulp-css-image-dimensions
Then, add it to your gulpfile.js:
> Note for usage in conjunction with CSS-Preprocessors
> If you are using this plugin in conjunction with a preprocessore like Sass,
> you should make sure to call this plugin after it.
`javascript
var cssImageDimensions = require("gulp-css-image-dimensions");
gulp.src("css/*/.css")
.pipe(cssImageDimensions('../images')
.pipe(gulp.dest("./dist"));
`
In your CSS, you can now write the following:
`css`
.some-class {
width: image-width('imagename.png');
height: image-height('imagename.png');
}
assuming imagename.png is e.g. 25x30px, gulp-css-image-dimensions will turn this into
`css`
.some-class {
width: 25px;
height: 30px;
}
#### imagesPath [optional]
Type: String .`
Default:
The path to your images directory. This can be either absolute, or relative to your css files.