假设我想用图像装饰指向某些文件类型的链接。我可以声明我的链接为
<a href='foo.pdf' class='pdflink'>A File!</a>
然后有CSS
.pdflink:after { content: url('/images/pdf.png') }
现在，这工作得很好，除非pdf.png的大小不适合我的链接文本。
我希望能够告诉浏览器缩放:after图像，但我无法找到正确的语法。或者这就像背景图像一样，无法调整大小?
ETA:我倾向于a)将源图像大小调整为“正确的”大小，服务器端和/或b)更改标记，简单地内联提供IMG标记。我试图避免这两件事，但他们听起来会更兼容，而不是试图做纯粹的CSS的东西。我最初的问题的答案似乎是“你有时可以做到”。
当前回答
你应该使用背景而不是图像。
.pdflink:after {
content: "";
background-image:url(your-image-url.png);
background-size: 100% 100%;
display: inline-block;
/*size of your image*/
height: 25px;
width:25px;
/*if you want to change the position you can use margins or:*/
position:relative;
top:5px;
}
其他回答
注意:after伪元素是一个方框，其中包含生成的图像。没有办法设置图像的样式，但可以设置方框的样式。
以下只是一个想法，上面的解决方案更实用。
.pdflink:after {
content: url('/images/pdf.png');
transform: scale(.5);
}
http://jsfiddle.net/Nwupm/
缺点:你需要知道图像的固有尺寸，它会给你留下一些空白，这是我无法摆脱的ATM。
你可以使用缩放属性。检查这个jsfiddle
你应该使用背景而不是图像。
.pdflink:after {
content: "";
background-image:url(your-image-url.png);
background-size: 100% 100%;
display: inline-block;
/*size of your image*/
height: 25px;
width:25px;
/*if you want to change the position you can use margins or:*/
position:relative;
top:5px;
}
您可以设置元素本身的宽度和高度，而不是设置背景图像的宽度和高度。
.pdflink::after {
content: '';
background-image: url(/images/pdf.png);
width: 100px;
height: 100px;
background-size: contain;
}
允许调整背景尺寸。但是，您仍然需要指定块的宽度和高度。
.pdflink:after {
background-image: url('/images/pdf.png');
background-size: 10px 20px;
display: inline-block;
width: 10px;
height: 20px;
content:"";
}
请参见MDN上的完整兼容性表。
