SCSS - 获取图像尺寸 [英] SCSS - Getting Image Dimensions

问题描述

我使用 inline-image 函数来创建图标类。这是我目前的SCSS：

I am using the inline-image function to create icon classes. This is my current SCSS:

.folder {
    background: inline-image("icons/home/folder.png", 'image/png') no-repeat center;
    height: 30px;
    width: 41px;
}

$ b $ p

我正在寻找一个函数来确定图像的宽度和高度所以我可以这样做：

I am looking for a function that can determine the width and height of the image so I can do something like this:

.folder {
    background: inline-image("icons/home/folder.png", 'image/png') no-repeat center;
    height: image-height("icons/home/folder.png", 'image/png');
    width: image-width("icons/home/folder.png", 'image/png');
}

有没有这样的东西？

推荐答案

找到此 http ：//compass-style.org/reference/compass/helpers/image-dimensions/

你猜到了正确的函数名。

You've guessed the right function names.

要使用它们，您需要安装指南针。

To use them you'll need to install compass.

这将是这样：

@import "compass/helpers";

.folder {
    background: inline-image("icons/home/folder.png", 'image/png') no-repeat center;
    height: image-height("icons/home/folder.png");
    width: image-width("icons/home/folder.png");
}

顺便说一句，我建议你使用sprites作为图标：
http://compass-style.org/reference/compass/helpers/sprites/

By the way I would recommend you to use sprites for icons: http://compass-style.org/reference/compass/helpers/sprites/

这篇关于SCSS - 获取图像尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！