Функция Less.js Misc image-height()

Опубликовано: 24 Января, 2023

Less.j — это простой препроцессор CSS, облегчающий создание управляемых, настраиваемых и многократно используемых таблиц стилей для веб-сайтов. Поскольку CSS является динамическим языком таблиц стилей, он предпочтительнее. LESS адаптируется, поэтому он работает с широким спектром браузеров. Веб-браузеры могут использовать только CSS, которые были созданы и обработаны с помощью препроцессора CSS, языка программирования. В дополнение к таким возможностям, как переменные, функции, примеси и операции, которые помогают создавать динамический CSS при сохранении обратной совместимости, это расширение языка CSS.

В этой статье мы собираемся обсудить функция Misc image-height() , функция которой заключается в определении высоты изображения. Эта функция возвращает ширину в пикселях изображения, имя которого передается в функцию image-size().

Синтаксис:

image-height("string")

Параметры:

строка: Это единственный обязательный параметр для этой функции. Этот параметр принимает строковое значение имени изображения.

Скомпилируйте код LESS в код CSS.

Пример 1. Код ниже демонстрирует использование и реализацию функции Misc image-height() .

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>

стиль.лесс:

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;
}

Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду:

lessc style.less style.css

Скомпилированный файл CSS выглядит следующим образом:

стиль.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;
}

Выход:

Пример 2: приведенный ниже код демонстрирует использование и реализацию функции Misc image-height(). вместе с ispixel() и логическими функциями.

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>

стиль.лесс:

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;
}

Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду:

lessc style.less style.css

Скомпилированный файл CSS выглядит следующим образом:

стиль.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;
}

Выход:

Ссылка: https://lesscss.org/functions/#misc-functions-image-height

JavaScript Picked

Функция Less.js Misc image-height()

HTML

CSS

CSS

HTML

CSS

CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ