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

【问题标题】：How can I force an image to display in its entirety with CSS?如何强制使用 CSS 完整显示图像？
【发布时间】：2015-11-30 22:47:05
【问题描述】：

我有一个小图标 (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;

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

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

【问题讨论】：

是什么让你尝试background-size: 80px 60px;？你试过background-size: 20px 20px;或background-size: 17px 17px;吗？
尝试设置班级的宽度和高度（finaff-small-pdf-form-icon）。也使用显示倾斜块。
你能做一个演示这个问题的sn-p吗？我做了a fiddle，但是显示整个图像没有问题。
我也试过没有问题，请给我们一个小提琴！
@Pablo：我想你的意思是内联。

标签： html css image background-image gif

【解决方案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;
}

【讨论】：

完全删除图标；不过，至少它向我表明，对类的更改确实正在传播。
你能告诉我你包裹这个元素的完整结构吗
请看我的回答。

【解决方案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)

【讨论】：

【解决方案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;}

【讨论】：