html - 如何使用 CSS 强制图像完整显示？

Question

我有一个小图标 (17 X 17)，它链接到我正尝试显示的页面:

<a class="finaff-small-pdf-form-icon" href="/Financial_Affairs_Forms/Payee_Setup_204.pdf">Payee Setup 204</a>

引用的 CSS 类定义如下:

.finaff-small-pdf-form-icon {
    position: relative;
    line-height: 20px;
    padding-left: 20px;
    border: none;
    background-image: url("/_layouts/images/pdficon.gif");
    background-repeat: no-repeat;
}

图标:

../虽然在底部被截断了:

我在 CSS 类中使用 background-size 尝试了以下方法:

background-size: 100% 100%;
background-size: 80px 60px;
background-size: contain;

...但它们都没有任何区别。

我怎样才能让图标显示它自己的全部，甚至是它的脚？

Answer 1

您提供的代码可以正常工作。我使用您现有的样式和 HTML 创建了一个 fiddle :

JSFiddle

HTML

<a class="finaff-small-pdf-form-icon" href="/Financial_Affairs_Forms/Payee_Setup_204.pdf">Payee Setup 204</a>

CSS

.finaff-small-pdf-form-icon {
    position: relative;
    line-height: 20px;
    padding-left: 20px;
    border: none;
    background-image: url("http://i.stack.imgur.com/vIXOF.gif");
    background-repeat: no-repeat;
}

我认为您的问题来自应用于页面上包含元素的父样式。您应该查看浏览器的开发人员控制台，以进一步了解导致该样式问题的原因 (F12)