打印时将图像格式化为最大尺寸为1页

Question

我正在制作一个显示聊天对话的 html 页面，我希望它能够适合打印机，以便可以轻松导出为 PDF。我的问题是长图像可以跨越多个页面。我希望这些内容的最大高度为 1 页，但我不确定执行此操作的最佳方法。

它的外观如下：

这是我正在使用的代码： https://jsfiddle.net/BigJeng/7k1ty7fj/

消息设置为占用不超过 60% 的宽度。

/* message containers */

.message {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 2px;
  padding: 2px;
  display: table;
}


/* sent message container */

.sent {
  border-color: #ccc;
  background-color: #ddd;
}


/* message wrapper to limit width */

.message-wrapper {
  width: 60%;
  margin-bottom: 10px;
}

.right {
  float: right;
}


/* Style time text */

.time {
  color: #999;
}

.clear {
  clear: both;
  margin: 0px;
}

h1 {
  padding: 0px;
  margin: 0px;
}

h3 {
  padding: 0px;
  margin: 0px;
}

img {
  width: 100%;
}

<div class="message-wrapper right">
  <span class="time right">3/18/18 4:22 PM</span>
  <br>
  <div class="message sent right">
    <img src="https://i.imgur.com/rzM7V7J.jpg">
  </div>
</div>
<div class="clear" />

如何使图像/日期 div 的最大高度为 1 8.5" x 11" 纸 @ 600 dpi？

Answer 1

这将解决您的问题：

@media print {
    img {page-break-inside: avoid;max-height: 95vh;max-width: 100%;width: auto;}
}

只需将上述 CSS 添加到您的代码中即可。

page-break-inside: avoid;max-height: 95vh

将使图像适合打印页面，

@media print

将确保它仅在打印时使用。

摆弄你自己的代码。

/* message containers */

.message {
  border: 2px solid #dedede;
  background-color: #f1f1f1;
  border-radius: 2px;
  padding: 2px;
  display: table;
}


/* sent message container */

.sent {
  border-color: #ccc;
  background-color: #ddd;
}


/* message wrapper to limit width */

.message-wrapper {
  width: 60%;
  margin-bottom: 10px;
  page-break-inside: avoid;
  page-break-after: auto
}

.right {
  float: right;
}


/* Style time text */

.time {
  color: #999;
}

.clear {
  clear: both;
  margin: 0px;
}

h1 {
  padding: 0px;
  margin: 0px;
}

h3 {
  padding: 0px;
  margin: 0px;
}

img {
  width: 100%;
}

@media print {
  img {
    page-break-inside: avoid;
    max-height: 95vh;
    max-width: 100%;
    width: auto;
  }
}

<h1>Paul "Wrecking" Crewe</h1>
<h3>555-555-5555</h3>
<br>

<div class="message-wrapper right">
  <span class="time right">5/8/17 12:23 PM</span>
  <br>
  <div class="message sent right">Test</div>
</div>
<div class="clear" />

<div class="message-wrapper ">
  <span class="time">5/8/17 12:23 PM</span>
  <br>
  <div class="message">Haha yeah</div>
</div>
<div class="clear" />

<div class="message-wrapper right">
  <span class="time right">5/8/17 12:23 PM</span>
  <br>
  <div class="message sent right">
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
  </div>
</div>
<div class="clear" />

<div class="message-wrapper ">
  <span class="time">5/8/17 12:23 PM</span>
  <br>
  <div class="message">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
</div>
<div class="clear" />

<div class="message-wrapper right">
  <span class="time right">12/6/17 3:56 PM</span>
  <br>
  <div class="message sent right">
    <img src="http://i.imgur.com/ImlYX.gif">
  </div>
</div>
<div class="clear" />

<div class="message-wrapper right">
  <span class="time right">3/18/18 4:21 PM</span>
  <br>
  <div class="message sent right">
    <img src="https://i.imgur.com/ldSywk2.jpg">
  </div>
</div>
<div class="clear" />

<div class="message-wrapper">
  <span class="time">3/18/18 4:21 PM</span>
  <br>
  <div class="message sent">
    <img src="https://i.imgur.com/WIaOSv6.jpg">
  </div>
</div>
<div class="clear" />

<div class="message-wrapper">
  <span class="time">3/18/18 4:21 PM</span>
  <br>
  <div class="message sent">
    <img src="https://i.imgur.com/pNdgqYe.png">
  </div>
</div>
<div class="clear" />

<div class="message-wrapper right">
  <span class="time right">3/18/18 4:22 PM</span>
  <br>
  <div class="message sent right">
    <img src="https://i.imgur.com/rzM7V7J.jpg">
  </div>
</div>
<div class="clear" />

希望这对您有帮助。

Answer 2

您可以在 css 中使用

@media

规则在打印媒体时应用特定样式。

<style tyle="text/css">
   @media print
   {
      .message{
         //print specific styles go here for div with class as message
      }
   }
</style>

Answer 3

Jithin Raj PR 的答案大部分让我明白了，但我想分享让我的 print.css 文件正常工作的最终 CSS。通常我会不惜一切代价避免使用

!important

，但对于 print.css 我的标准要低得多，我只是希望图像永远不会大于页面：

.entry img {
    width: auto !important;
    page-break-inside: avoid !important;
    max-height: 95vh !important;
    max-width: 95vw !important;
}