HTML PDF dynamical height - html

Question

I have an HTML, which is displaying a lot of PDF files. They are arranged in a table, and the table scales dynamically.
For a while this format was working:
.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;
}
<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&navpanes=0&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&navpanes=0&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&navpanes=0&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>
The HTML was working fine for a while, the PDFs were scaling with the table. I even have that Scaler image at the end of the table as a 4th cell, which makes sure that the cells should have a ration of 1:1.
I think in one of the recent updates in chrome made this happen.Now it's completely broken, and the PDFs have a fixed height. Is there any way to fix this?
Thank you in advance!
Edit: The same goes when I try to insert an HTML instead of the PDF:
<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;">
<p>Your browser does not support iframes.</p>
</iframe>
<div class="caption">
<div class="work_title">
<h1>Measurement and Analysis<br>Overview</h1>
</div>
</div>
</a>
</div>
</td>
Edit2:
So basically a while ago this code resulted PDFs and HTML previews dinamically scaling with the other elements of the table. As you can seee there's that scaler image, which scales well if I change my window size in the live version. However the PDF and HTML previews' height remains a constant 150 for some reason. I want them to scale with the image, however only their with is scaling, not their height.