In LESS, is it possible to get image dimension from the bitmap files? -


i found myself hard-coding image width numbers in less stylesheet.

it possible have less function automate this? e.g.

@banner-width : image-width("image/banner.png"); 

if using javascript implementation of less (less.js), use javascript interpolation between back-ticks , use normal javascript functionality - this:

@banner-width: ~`function(imguri){var img=new image(); img.src = imguri; return img.width }('image/banner.png')`; 

or go further , make reusable mixins.

less:

.width(@img) {   @width: ~`function(imguri){var img=new image(); img.src = imguri; return img.width }(@{img})`;     width: @width; } .height(@img) {   @height: ~`function(imguri){var img=new image(); img.src = imguri; return img.height }(@{img})`;     height: @height; }  .test{     @src: 'http://www.google.com/intl/en_all/images/logo.gif';     .width(@src);     .height(@src); } 

the output css:

.test {   width: 276;   height: 110; } 

which should logo http://www.google.com/intl/en_all/images/logo.gif

  • to add units coud add unit(@dimension,px) mixins.

Comments

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -