CSS 调整内容属性的图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12082948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
resize the content property's image
提问by Honest Abe
I have an unordered list of links and each link has a unique id.
I'm using that id with the :beforeselector to place
the associated website's favicon before the link (using the content property).
One of these icons is twice the size of the others.
Is there any way to change the size of this icon using CSS?
If the answer is no, is there any way to do this other than editing the image?
我有一个无序列表的链接，每个链接都有一个唯一的 ID。
我使用该 id 和:before选择器将
关联网站的图标放在链接之前（使用 content 属性）。
其中一个图标的大小是其他图标的两倍。
有没有办法使用 CSS 更改此图标的大小？
如果答案是否定的，除了编辑图像之外还有什么方法可以做到这一点？
Visual reference:
视觉参考：
Here is what I tried (and it doesn't seem to work):
这是我尝试过的（似乎不起作用）：
#geog:before
{
content: url("icons/geogebra.ico") " ";
height: 50%;
width: 50%;
}
回答by David Vasquez
I've run into the same problem before. Try this:
我以前遇到过同样的问题。尝试这个：
#geog:before
{
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
content: "";
background: url("icons/geogebra.ico") no-repeat 0 0;
background-size: 100%;
}
I'm sure you'll have to tweak those values, but that worked for me. Of course, this won't work if you can't set it as a background image for some reason. Best of luck to you!
我确定您必须调整这些值，但这对我有用。当然，如果由于某种原因无法将其设置为背景图像，这将不起作用。祝你好运！
回答by Plamen
I believe you are looking for the zoomproperty. Check this jsfiddle
我相信您正在寻找该zoom物业。检查这个jsfiddle
Also you can add spacing with margin-rightbetween the icon and the content of the element.
您还可以margin-right在图标和元素内容之间添加间距。
回答by Joe Posorski
Use PX instead of %
使用 PX 而不是 %
#geog:before
{
content: url("icons/geogebra.ico") " ";
height: 5px;
width: 5px;
}
Give that a try :-)
试试看:-)
