如何強制使用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

嘗試使用

.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創建了一個小提琴：

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類：

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