Question

我有一个应用程序，允许用户上传徽标，以后在打印页面时将使用该徽标。无论尺寸如何，我都需要以某种确定的方式显示此徽标。对于Web CSS，这很简单，我设置了最大宽度和最大高度，并且宽徽标和高徽标看起来都不错。但是当我打印时，最大设置将被忽略。我在某处阅读到打印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背景，没有重复和backgroind大小的封面或包含吗？将img标签替换为span或div，然后将CSS宽度和高度设为CSS，然后将其设为背景即可。您可以通过样式atreibute将图像源嵌入内联css。这对您有用吗？

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

1 个答案: