Member Avatar for Aquaman

I have placed a web page within a web page using a simple frames code but would like to reduce the size of the inserted page. Can anyone help with this?

The current page is at: http://aquafind.com/tropicals.php

Thank you

  • 3 Contributors
  • 5 Replies
  • 189 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Aquaman

Dani AI

Generated

A quick, practical way to make an entire page appear smaller inside a framed area is to scale the iframe visually rather than try to reflow the embedded document. If you can edit the embedded page, the best fix is to make it responsive (media queries / a meta viewport) so it naturally fits smaller containers. If you cannot edit it, a CSS transform on the iframe usually gives the result you want without JavaScript.

Below is a drop-in example (scale = 0.6). The key is to set the iframe’s transform and then increase its logical width/height by 1/scale so the page content fits the visible wrapper without internal scrollbars.

<div class="frame-wrapper">
  <iframe src="/path/to/embedded-page.html" class="shrunk-iframe"></iframe>
</div>

<style>
.frame-wrapper {
  width: 600px;   /* visible area */
  height: 400px;
  overflow: hidden;
}
.shrunk-iframe {
  transform: scale(0.6);
  transform-origin: 0 0;
  width: 166.6666%;   /* 100% / 0.6 */
  height: 166.6666%;
  border: 0;
  display: block;
}
</style>

Notes, limits and troubleshooting:

  • If the embedded page is on another domain, you cannot inject CSS/JS into it (same-origin). Scaling the iframe from the parent still works, but you cannot change the inner layout without cooperation from the embedded site.
  • If you control both pages, a cleaner approach is to add responsive CSS to the embedded page or use postMessage so the parent can ask the child to adjust itself.
  • Scaled content can look slightly fuzzy and may affect usability; test across browsers and devices. For old-IE support you can try the nonstandard zoom property as a fallback.
  • If shrinking makes the content too small, offer an “open full page” link so users can view the original.

This approach expands on ’s CSS idea and addresses ’s goal of shrinking the entire page while echoing ’s point that trimming content (or making it responsive) is often the cleanest long-term solution.

Recommended Answers

All 5 Replies

Member Avatar for kooia

I haven't really ever used iframes except for with some videos where I was feeling extra lazy, but from what I've read, you need to use CSS or JavaScript. But I did find your thread very interesting, i'd never thought of that. Maybe you can use embed, I;m not sure if it works on HTML pages.

Member Avatar for Aquaman

Thank you but my pages were set up be someone else and I am not to familiar with css or Java Script to accomplish this feat.

Member Avatar for drjohn

Whatever size the frame is, the size of the page inside it is determined by that page's design and amount of content. Assuming it's the Tropical Fish News page, how about having less news? But honestly, why worry about it, your visitors will decide whether they wish to view it all or not.

Member Avatar for Aquaman

Ah, there lies my problem. The page is not reduced in size but is instead simply placed in the smaller box forcing users to scroll left & right & up & down. The size of the text does not matter if the whole page were to be shrunk down as this is only a draw to the trading board pages of the site. The linking page that I really want there is quite large.

Member Avatar for Aquaman

Is this task impossible or am I on the wrong forum?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.