如何強制使用CSS完整顯示圖像？

我有一個小圖標鏈接到一個網頁，其中我想顯示像這樣（17×17）：如何強制使用CSS完整顯示圖像？

<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; 
}

的圖標：

../gets截斷底部，雖然：

我試圖與背景大小的CSS類如下：

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

...但他們沒有什麼不同。

我怎樣才能讓圖標顯示所有的本身，甚至它的腳？

來源

2015-09-04 B. Clay Shannon

是什麼讓你嘗試'背景-SIZE：80px 60像素;'？你嘗試過'background-size：20px 20px;'或'background-size：17px 17px;'？ –

嘗試設置班級的寬度和高度（finaff-small-pdf-form-icon）。也使用顯示傾斜塊。 – Pablo

你可以做一個片段來證明這個問題嗎？我做了[小提琴]（http：// jsfiddle。net/MrLister/x131ofex /），但顯示整個圖像沒有問題。 –

您提供的代碼工作正常。我已經使用現有的造型和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; 
}

我相信你的問題是由父母的風格來正在應用於您的pa上包含元素GE。你應該看看瀏覽器的開發者控制檯更多的澄清是什麼原因造成的是造型問題（F12）

來源

2015-09-04 17:59:58 leigero

嘗試使用

.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; 
}

來源

2015-09-04 17:54:58

完全刪除圖標;不過，至少這表明了我對班級的變革真的正在傳播。 –

你能告訴我你包裹這個元素的完整結構 –

請看我的答案。 –

這是最終爲我工作：

.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;

更充分披露，先前顯示嵌入一個div內像這樣的HTML：

<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;}

來源

2015-09-04 20:33:01

如何強制使用CSS完整顯示圖像？

回答

相關問題