Less.js Misc image-size() Function

Last Updated : 11 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Given that CSS is a dynamic style sheet language, it is preferable. LESS is adaptable enough to work with a variety of browsers. Only CSS that has been created and processed using a computer language known as the CSS pre-processor can be used by web browsers. In addition to providing capabilities like variables, functions, mixins, and operations to help create dynamic CSS while maintaining backward compatibility, it is a CSS language extension.

In this article, we are going to discuss Misc image-size() Function, whose function is to determine the size of the image which includes the width and length. This function returns the dimension of the image whose name is passed into the image-size() function, the returning values are two pixel units of the length and width.

Syntax:

image-size("string")

Parameters:

string: This is the only compulsory parameter for this function. This parameter takes the string value of the name of the image.

Compile LESS code into CSS code

Example 1: The code below demonstrates the usage and implementation of the Misc image-size() Function.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="style.css" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Less.js Misc image-size() Function</h3> 
      
    <div class="c1"></div> 
</body> 
  
</html>

style.less:

CSS

@body-bg-color: #eeeeee; 
@back: image-size('https://media.geeksforgeeks.org/wp-content/uploads/20221007120503/1.png') ; 
@val: 150px; 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: 250px; 
    height: 250px; 
    margin: 1rem; 
    background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/20221007120503/1.png"); 
    background-repeat: no-repeat; 
    margin: @back; 
}

Syntax: To compile the above LESS code to CSS code, run the following command.

lessc style.less style.css

The CSS output of the above Less file was compiled into the following file.

style.css:

CSS

body { 
     background-color: #eeeeee; 
} 
 .c1 { 
     width: 250px; 
     height: 250px; 
     margin: 1rem; 
     background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/20221007120503/1.png"); 
     background-repeat: no-repeat; 
     margin: image-size('https://media.geeksforgeeks.org/wp-content/uploads/20221007120503/1.png'); 
} 

Output:

Example 2: The code below demonstrates the usage and implementation of the Misc image-size() Function and when the returned value is input in the ispixel function it returns a false because there are two pixel values.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
        type="text/css" href="style.css"/> 
</head> 
  
<body> 
    <h1 style="color:green;">GeeksforGeeks</h1>   
    <h3>Less.js Misc image-size() Function</h3> 
    <div class="c1"></div> 
</body> 
  
</html>

style.less:

CSS

@body-bg-color: #eeeeee; 
@back: image-size('1.png'); 
@val: 150px; 
@cond: boolean(ispixel(225px 225px)); 
  
body { 
    background-color: @body-bg-color; 
} 
  
.c1 { 
    width: 250px; 
    height: 250px; 
    margin: 1rem; 
    background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/20221007120503/1.png"); 
    background-repeat: if(@cond, no-repeat, repeat); 
    margin: @back; 
}

Syntax: To compile the above LESS code to CSS code, run the following command.

lessc style.less style.css

The CSS output of the above Less file was compiled:

style.css:

CSS

body { 
    background-color: #eeeeee; 
} 
  
.c1 { 
    width: 250px; 
    height: 250px; 
    margin: 1rem; 
    background-image: url("https://media.geeksforgeeks.org/wp-content/uploads/20221007120503/1.png"); 
    background-repeat: repeat; 
    margin: 225px 225px; 
}