Full page in Iframe

Question

I am having iframe of 250 X 250, in which there is an image of 472 X 107.

Have look at snippet.

<iframe src="https://i.imgur.com/NYLlgwU.png" width="250px" height="250px"></iframe>

Now I want to show full image in the iframe, without scrolling.

Note 1: Size of Iframe should remain same i.e 250 X 250.

Note 2: Size of an image can change.

Note 3: It is not necessary it will be always an image. It can be pdf or text file too.

Samuel Asor · Answer 1 · 2017-09-09T15:11:27.567

-1

You can add a scrolling="no" attribute to the iframe and tweak it using css a little.

iframe {
  max-width: 100%;
  overflow: hidden;
  border: none;
  margin: auto;
}

<iframe src="https://i.imgur.com/NYLlgwU.png" class="img-responsive" scrolling="no" width="250" height="250"></iframe>

See Codepen too

edited Sep 09 '17 at 15:11

answered Sep 09 '17 at 14:18

Samuel Asor

480
8
25

Is the image not contained in the `iframe`? How come you want the image to be bigger than it's **fixed sized** container? – Samuel Asor Sep 09 '17 at 14:22
The image is stored in the database, and it's not necessary that all images will have **250 X 250** size. – Babalu Pandey Sep 09 '17 at 14:24
As my `iframe` is in **table**, I can't extend the size of `iframe` more than 250 x 250 – Babalu Pandey Sep 09 '17 at 14:25
And it is not compulsory that it will have only **image**. It can also have **pdf** – Babalu Pandey Sep 09 '17 at 14:28
No, your update didn't solve the problem. See:- https://stackoverflow.com/questions/46131440/full-page-in-iframe#comment79225524_46131615 – Babalu Pandey Sep 09 '17 at 14:29
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/154031/discussion-between-babalu-pandey-and-samuel-asor). – Babalu Pandey Sep 09 '17 at 14:33

Full page in Iframe

1 Answers1