Less.js Misc image-height() Function

Last Updated : 06 Nov, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS is a dynamic style sheet language, it is preferred. LESS is adaptable, so it works with a wide range of browsers. Only CSS that has been created and processed using the CSS pre-processor, a computer language, 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 the Misc image-height() function, whose function is to determine the height of an image. This function returns the width in the pixel value of the image whose name is passed into the image-size() function.

Syntax:

image-height("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-height() function.

HTML

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

style.less:

CSS

@body-bg-color: #eeeeee; 
@wide: image-height( 
'https://media.geeksforgeeks.org/wp-content/uploads/20221010110902/1-200x200.png') ; 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: @wide; 
    height: @wide; 
    background-image: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/20221010110902/1-200x200.png"); 
    background-repeat: no-repeat; 
    margin: 1rem; 
    margin-left: @wide; 
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be:

style.css:

CSS

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

Output:

Example 2: The code below demonstrates the usage and implementation of the Misc image-height() function along with the ispixel() and boolean functions.

HTML

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

style.less:

CSS

@body-bg-color: #eeeeee; 
@wide: image-height( 
'https://media.geeksforgeeks.org/wp-content/uploads/20221010110902/1-200x200.png') ; 
@cond: boolean(ispixel(@wide)); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: @wide * 3; 
    height: @wide; 
    background-image: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/20221010110902/1-200x200.png"); 
    background-repeat: if(@cond, repeat, no-repeat); 
    margin: 1rem; 
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

The compiled CSS file comes to be:

style.css:

CSS

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