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(
body {
background-color : @body-bg-color;
}
.c 1 {
width : @wide;
height : @wide;
background-image : url (
background-repeat : no-repeat ;
margin : 1 rem;
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 ;
}
.c 1 {
width : 225px ;
height : 225px ;
background-image : url (
background-repeat : no-repeat ;
margin : 1 rem;
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(
@cond: boolean(ispixel(@wide));
body {
background-color : @body-bg-color;
}
.c 1 {
width : @wide * 3 ;
height : @wide;
background-image : url (
background-repeat : if(@cond, repeat , no-repeat );
margin : 1 rem;
}
|
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 ;
}
.c 1 {
width : 675px ;
height : 225px ;
background-image : url (
background-repeat : repeat ;
margin : 1 rem;
}
|
Output:
Reference: https://lesscss.org/functions/#misc-functions-image-height
Share your thoughts in the comments
Please Login to comment...