在打印 css 中设置图像最大高度

Question

我有一个应用程序允许用户上传稍后将在打印页面时使用的徽标。无论尺寸如何，我都需要以一种看起来不错的方式显示此徽标。这对于 web css 来说很简单，我设置了一个最大宽度和一个最大高度，它看起来很适合宽徽标和高徽标。但是当我打印时，最大设置被忽略了。我在某处读到 print css 不支持 max-width 和 max-height 属性，所以我认为应该在某处解决，但我找不到。这是我的图片css：

.print-contact .logo-img {max-width:60%;max-height:100px;float:left;display:inline-block;margin-right:15px;}

和html

<tr><!-- other rows of tabular data --></tr>
<tr class="print-contacts-row">
    <td class="title">Questions?<br>Please Contact:</td>
    <td class="print-contact">
        <div style="width:100%; float:left;">
            <img class="logo-img" src="/logo" alt="logo"><br>
            <ul>
            ....<!-- more contact info -->
            </ul>
        </div>
    </td>
</tr>

这会导致图片完全没有被 css 调整大小。相反，它被缩小到一些未知的维度。我不能成为第一个遇到这个问题的人，所以我很惊讶我找不到某种解决方法。有没有人在打印时为图像提供最大高度和最大宽度的解决方法？任何帮助将不胜感激。

解决方案需要支持 IE 11

Answer 1

您可以尝试使用宽度和高度设置尺寸，制作图像块元素，然后使用object-fit: cover; 或object-fit: contain; 这可能会成功。

为 IE 11 编辑：您可以将徽标打印为具有特定元素大小的 CSS 背景，没有重复和背景大小的覆盖或包含？用 span 或 div 替换 img 标签，与使用 css 相比，您可以为其指定宽度和高度并将其作为背景。您可以通过样式 atreibute 嵌入带有内联 css 的图像源。这对你有用吗？