PostCSS now able to get into the picture width and height of it?
See original GitHub issueFor example, when dealing with 2x pictures:
input:
.foo {
background-image: -webkit-image-set(
url(../img/foo@1x.png) 1x,
url(../img/foo@2x.png) 2x);
}
output:
.foo {
background-image: url(../img/foo@1x.png);
}
@media
only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16- */
only screen and (-moz-min-device-pixel-ratio: 2), /* Firefox */
only screen and (-webkit-min-device-pixel-ratio: 2), /* WebKit */
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx)
{
.foo {
background-image:url(../img/foo@2x.png);/* Retina */
background-size: (2x.png-width/2)px (2x.png-height/2)px;
}
}
Issue Analytics
- State:
- Created 9 years ago
- Comments:12 (11 by maintainers)
Top Results From Across the Web
Working with Images in Stylesheets with PostCSS - CSS-Tricks
Calculating dimensions. Sometimes you need to size elements or size the background itself based on the dimensions of the image you are using....
Read more >PostCSS Plugins
Transform CSS with the power of JavaScript. Auto-prefixing, future CSS syntaxes, modules, linting and more are possible with hundreds of PostCSS plugins.
Read more >postcss-image-sizes - npm
PostCSS plugin to automatically get image dimensions. Latest version: 0.1.0, last published: 6 years ago. Start using postcss-image-sizes in ...
Read more >Using PostCSS with Images - Developer Drive
Given an image, you might want to change the size or dimensions of the image to fit to a certain size. The postcss-assets...
Read more >What is PostCSS? How to Use Plugins to Automate CSS Tasks
PostCSS is a JavaScript tool that transforms your CSS code into an ... the final CSS file size as much as possible so...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@lsycxyj use
decl.source.input.file
to get CSS file path. Then you can use it to convert relative path to absolute path.@ai The problem is how I can make a function of “extractPathFromValue” when I use many relative references.