6

I want to create an iframe with a custom width.

I don't want the iframe to be responsive (the site embedded in the iframe is responsive) and I want it to appear like a shrunk picture.

I can give you some examples if you wish. Any idea how to do this?

2
  • if width attribute didn't work for you can you please provide examples?
    – AZee
    Apr 6, 2014 at 13:43
  • I think what the OP is suggesting is that the site/page loaded into the iframe needs to be shrunk to fit inside the available iframe window. Or in other words to set the viewport of the page. Howevwer, as far as I am aware this sin't possible using just html since the viewport is declared in the original page itself and not externally. There may be some JQuery plugin for this but I am not aware of any such options. Nov 18, 2014 at 16:35

2 Answers 2

20

you can scale the iframe using css transform. for example, if you'd like to make the page within the iframe to display at half size..

iframe {
  transform: scale(0.5, 0.5);
  height: 1000px;
  width: 1000px;
}
<iframe src="https://example.com"></iframe>

That should display a 1000x1000 viewport of the page shrunk down to a 500x500 iframe.

1
0

If you have already tried the width attribute and that didn't work, try using CSS' max-width property.

Example,

index.html

<iframe src="http://www.google.com/" class="if"></iframe>

style.css

.if { max-width: 100px; }

Find here live demo

2
  • If you found either mine or Omar's answer helpful, the least you can do is accept it as a best answer. Apr 6, 2014 at 19:20
  • Hi, sorry for so delayed reply. Actually my problem is I want to display a 100% iframe width into a 500px container without scrolling and width should still be 100% (though the window would appear much smaller)
    – mehulmpt
    Apr 7, 2014 at 12:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.