README
PostCSS Image Sizes
PostCSS plugin for printing image sizes in your css. It includes helpers for both retina and non-retina images.
img.my_image {
/* Input example */
background-size: image-width('~my_image.png') image-height('~my_image.png');
}
img.my_hidpi_image {
/* Input example */
background-size: hidpi-image-width('~my_image.png') hidpi-image-height('~my_image.png');
}
img.my_image {
/* Output example */
background-size: 100px 200px;
}
img.my_hidpi_image {
/* Output example */
background-size: 50px 100px;
}
Usage
const imageSizes = require('postcss-image-sizes')
postcss([imageSizes({assetsPath: '/path/to/images'})])
See PostCSS docs for examples for your environment.
Absolute and relative paths
We recommend to use absolute paths for images, since CSS has very limited support for relative paths. Path is treated as absolute, when it is prefixed with ~
or /
sign. You need to specify assetsPath
option to use those absolute paths (see below).
All other paths will be treated as relative (to current file).
Configuration options
assetsPath
— absolute path, against which images paths will be resolved.