using "transform" and "table" together

Question

I try to Shrink an Iframe to show whole page in a small frame!

iframe {
width: 1108px;
height: 710px;
-webkit-transform:scale(0.25);
-moz-transform:scale(0.25);
-o-transform:scale(0.25);
transform:scale(0.25);
}

 <table border =1>
<tr>
<td>
<iframe src ="http://example.com"/>
</td>
</tr> 
   </table>

this code works but I have a problem in Table! when I put the iframe in a table , the cell size become as the real iframe size (1108*710) but the iframe is shown small because of the codes! how can i fit the i frame to the cells?

enter image description here

transform does not change the physical dimension of the element that is being transformed. — Daniel A. White, Feb 19 '15 at 19:57
possible duplicate of [How can I scale the content of an iframe?](http://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe) — Palpatim, Feb 19 '15 at 20:48
its not Duplicate ! I shrink the iframe but the physical size is still big and is not showing good in table ! — Reza Baghaie, Feb 19 '15 at 21:14

score 0 · Answer 1 · answered Feb 20 '15 at 16:59

0

The only way I would see to approach what you want it to use a em trick:

iframe {
  width: 69.250em;   /* 1108px = 69.250em */
  height: 44.375em;  /* 710px = 44.375em */
  font-size: 0.25em; /* base scale: 0.25 */
}

<table border=1>
  <tr>
    <td>
      <iframe src="http://example.com"/>
    </td>
  </tr> 
</table>

But your iframe content will render as you were using a 277px * 177.5px resolution.

answered Feb 20 '15 at 16:59

zessx

68,042
28
135
158

no its not working !! look at my question picture ! i want to remove the highlighted part. this is your code: https://jsfiddle.net/v6y5dL1q/ – Reza Baghaie Feb 20 '15 at 18:11

using "transform" and "table" together

1 Answers1