Open In App

Less.js Misc image-width() Function

Improve
Improve
Like Article
Like
Save
Share
Report

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is preferable since CSS is a dynamic style sheet language. Since LESS is flexible, it can be used with many different browsers. Web browsers can only use CSS that has been developed and processed using a computer language known as the CSS pre-processor. It is a CSS language extension that also offers features like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while keeping backward compatibility.

In this article, we are going to discuss Misc image-width() Function, whose function is to determine the width of an image. This function returns the width in pixel value of the image whose name is passed into the image-size() function. 

Syntax:

image-width("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-width() 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-width() Function</h3>
      
    <div class="c1"></div>
</body>
  
</html>


style.less:

CSS




@body-bg-color: #eeeeee;
@wide: image-width('1.png');
  
body {
    background-color: @body-bg-color;
}
  
.c1 {
    width: @wide;
    height: @wide;
    background-image: url("1.png");
    background-repeat: no-repeat;
    margin: 1rem;
    margin-left: @wide;
}


The photo given below is “1.png“:

 

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: image-width('1.png');
     height: image-width('1.png');
     background-image: url("1.png");
     background-repeat: no-repeat;
     margin: 1rem;
     margin-left: image-width('1.png');
}


Output:

 

Example 2: The code below demonstrates the usage and implementation of the Misc image-width() Function and using the ispixel and boolean functions alongside it.

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-width() Function</h3>
      
    <div class="c1"></div>
</body>
  
</html>


style.less: 

CSS




@body-bg-color: #eeeeee;
@wide: image-width('1.png');
@cond: boolean(ispixel(@wide));
  
body {
    background-color: @body-bg-color;
}
  
.c1 {
    width: @wide * 3;
    height: @wide;
    background-image: url("1.png");
    background-repeat: if(@cond, repeat, no-repeat);
    margin: 1rem;
}


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: image-width('1.png') * 3;
     height: image-width('1.png');
     background-image: url("1.png");
     background-repeat: if(boolean(false),repeat,no-repeat);
     margin: 1rem;
}


Output:

 

Reference: https://lesscss.org/functions/#misc-functions-image-width 



Last Updated : 11 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads