如何使用 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 class是这样定义的：

.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 class 中使用 background-size 尝试了以下操作：

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

...但其中 none 有所作为。

如何让图标显示整个人，甚至是它的脚？

Answer 1

尝试使用

.finaff-small-pdf-form-icon:before {
    content: url("/_layouts/images/pdficon.gif");
    display: inline-block;
    height: 17px;
    margin-right: 20px;
    width: 17px;
}
.finaff-small-pdf-form-icon {
    border: none;
    display: inline-block;
    line-height: 20px;
    position: relative;
}

Answer 2

您提供的代码可以正常工作。我使用您现有的样式和 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)

Answer 3

这就是最终对我有用的东西：

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

关键添加（行高也改变了，但毫无疑问，原始值仍然可以）是：

display: block;

为了更全面地披露，之前显示的 HTML 嵌入在 div 中，如下所示：

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

这里是 CSS class 引用：

.JS_Toggle_Holder_Content {width: 96%; padding: 5px; margin: 5px auto; border: 1px solid #ddd; display: none; background: #fff;}

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

How can I force an image to display in its entirety with CSS?

html

css

image

gif

background-image