1

I want to simulate what a page will look like on another page, such as a web page preview on a little TV. I use an <iframe> for this, and scale in CSS to bring it down to a reasonable size.

<div class="tv">
  <iframe src="https://example.com"></iframe>
</div>

.tv {
  width: 960px;
  height: 540px;
}

.tv iframe {
  width: 1920px;
  height: 1080px;
  scale: 0.5;
  transform-origin: 0 0;
  margin: 0;
  padding: 0;
}

Now, suppose the iframe size can be different, changed with script. If the iframe width/height become larger, the scale must become smaller. If the iframe width/height become smaller, the scale must become larger.

Is there a way to set the scale of an item so that it always fits within its container, preserving aspect ratio? Or must I calculate the scale in script, each time the size of the iframe changes?

Brad
  • 159,648
  • 54
  • 349
  • 530
  • Possible duplicate? http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css – Obed Parlapiano Dec 16 '16 at 16:17
  • You are using scale wrong: `transform: scale(2, 3);`. http://www.w3schools.com/css/css3_2dtransforms.asp – Alic Dec 16 '16 at 16:18
  • @Alic Thanks, fixed. I had put the wrong code in the question. – Brad Dec 16 '16 at 17:46
  • @ObedMarquezParlapiano Unfortunately, that's not a duplicate. I need to use `scale` as I need the iframe content to scale down. – Brad Dec 16 '16 at 17:47

0 Answers0