HTML PDF动态高度

Question

我有一个HTML，它显示了很多PDF文件。它们排列在一张桌子上，表格动态缩放。

有一段时间，这种格式正在运作：

＆＃13;

＆＃13;

.main .work {
  display: table-row;
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}

.main .work .media {
  width: 100%;
}

.main .work .caption {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #ffffff;
  opacity: 0;
}

.main .work a:hover .caption {
  opacity: 1;
}

＆＃13;

<table width="100%" height="100%" border="1" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td width="33%" height="100%">
        <div class="work">
          <a href="inner_004.html">
            <embed src="https://www.oic.qld.gov.au/__data/assets/pdf_file/0006/7755/other-sample-googleanalytics-report.pdf#toolbar=0&amp;navpanes=0&amp;scrollbar=0" width="100%" height="100%" type="application/pdf" padding-bottom="1000pt">
            <div class="caption">
              <div class="work_title">
                <h1>Report1</h1>
              </div>
            </div>
          </a>
        </div>
      </td>
      <td width="33%" height="100%">
        <div class="work">
          <a href="inner_005.html">
            <embed src="http://www.googleguide.com/print/adv_op_ref.pdf#toolbar=0&amp;navpanes=0&amp;scrollbar=0" width="100%" height="100%" type="application/pdf" padding-bottom="1000pt">
            <div class="caption">
              <div class="work_title">
                <h1>Report2</h1>
              </div>
            </div>
          </a>
        </div>
      </td>
      <td width="33%" height="100%">
        <div class="work">
          <a href="inner_006.html">
            <embed src="https://www.oic.qld.gov.au/__data/assets/pdf_file/0006/7755/other-sample-googleanalytics-report.pdf#toolbar=0&amp;navpanes=0&amp;scrollbar=0" width="100%" height="100%" type="application/pdf" padding-bottom="1000pt">
            <div class="caption">
              <div class="work_title">
                <h1>Report3</h1>
              </div>
            </div>
          </a>
        </div>
      </td>
      <td width="1%">
        <div class="work">
          <a href="MQBOVERALL.html">
            <img src="https://assets.mspcdn.net/t_c-desktop-normal,f_auto,q_auto,d_c:noimage.jpg/c/12200-67-3.jpg" class="media" alt="">
          </a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

HTML工作正常一段时间，PDF正在使用表格缩放。我甚至将表格末尾的Scaler图像作为第4个单元格，这样可以确保单元格的比例为1：1。

我认为在Chrome最近的一次更新中发生了这种情况。现在它完全坏了，而且PDF有一个固定的高度。有什么方法可以解决这个问题吗？

提前谢谢！

编辑：当我尝试插入HTML而不是PDF时，情况也一样：

＆＃13;

＆＃13;

<td width="33%" height="100%"> 
  <div class="work">
    <a href="inner_010.html">
      <iframe src="https://www.google.com/" width="200%" height="190%" style="-webkit-transform:scale(0.5);-webkit-transform-origin: top left;-moz-transform: scale(0.5, 0.5); -moz-transform-origin: top left;">
        &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
      </iframe>
      <div class="caption">
        <div class="work_title">
          <h1>Measurement and Analysis<br>Overview</h1>
        </div>
      </div>
    </a>
  </div>
</td>

＆＃13;

＆＃13;

＆＃13;

EDIT2：

所以基本上不久前这段代码导致PDF和HTML预览与表格的其他元素进行动态缩放。你可以看到那个缩放图像，如果我在实时版本中更改窗口大小，它可以很好地扩展。然而，PDF和HTML预览＆＃39;由于某种原因，身高仍然是150。我希望它们能够与图像一起缩放，但是只有缩放而不是它们的高度。