Member Avatar for kevin wood

i have an i frame on my page and when a button is clicked it loads the title for that page into the iframe. the problem i am having is when the image is loaded into the iframe it reduces the size of the image. how can i get it to display the image without changing the size of it the code i have used looks like this

<iframe name="ifrm" id="ifrm2" src="images/home_title.jpg" scrolling="no" allowtransparency="true" ></iframe>
  • 2 Contributors
  • 2 Replies
  • 4K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kevin wood

Dani AI

Generated

What you are seeing is normal when an iframe points directly at an image file. The iframe renders a stand‑alone image document, and some browsers (notably older IE versions around 2008) auto scale large images to fit the viewport. Combine that with a small default iframe size and scrolling="no", and it looks like the image has been shrunk rather than simply scaled to fit the frame. Peter_budo’s hunch about scrolling explains why you do not get scrollbars, but the scale‑to‑fit behavior is the bigger culprit here.

Quick fixes that avoid tables:

  • Best UX: do not use an iframe at all. Just swap an <img> source when the button is clicked. It is lighter, accessible, and predictable.
<img id="titleImg" alt="Page title">
<script>
  function showTitle() {
    document.getElementById('titleImg').src = 'images/home_title.jpg';
  }
</script>
  • If you must keep the iframe (e.g., isolation), load a tiny HTML wrapper instead of the raw image. This prevents the browser’s stand‑alone image scaling and lets you control dimensions.
<!-- image-wrapper.html -->
<!doctype html>
<meta charset="utf-8">
<style>
  html,body { margin:0; }
  img { display:block; max-width:none; height:auto; }
</style>
<img src="images/home_title.jpg" width="800" height="200">

Then point the iframe to image-wrapper.html, give the iframe explicit width/height, and leave scrolling on auto.

<iframe id="ifrm2" src="image-wrapper.html" width="800" height="200"></iframe>

Nice-to-haves:

  • To size the iframe to the image automatically (same origin only):
const f = document.getElementById('ifrm2');
f.addEventListener('load', () => {
  const img = f.contentDocument.querySelector('img');
  if (img) { f.width = img.naturalWidth; f.height = img.naturalHeight; }
});
  • Avoid tables for layout, and note that the scrolling and allowtransparency attributes are obsolete in modern HTML; prefer explicit dimensions and CSS.

Recommended Answers

All 2 Replies

Member Avatar for peter_budo

Wouldn't be that because you disabled scrolling? Did you try to set it as auto?

Member Avatar for kevin wood

as it was only a couple of images i got round it by just creating a web page wih a one cell table on it and displaying the image in there. then with the iframe i just called the web page holding the image and it displayed it fine.

probably another way to do it but it only took me a couple of minutes to create the pages i needed thanks for the reply though.

explanation of how i worked through the problem:

my problem was i needed to display an image inside an iframe, when the image was displayed in the iframe using the img tag the image was resized and was barely visible.

solution

create a web page which has a one cell table the same size as the image you need displaying. insert the image into the table cell with the image tag. save this page with what ever name you like.

on the page where you want the image to be displayed in the iframe, instead of calling the image directly into the iframe call the page you have created with the image in the table.

set the ifame to be slightly bigger than the table cell and set the scrolling to no.

the image should now be displayed in the iframe keeping all its original attributes.

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.