1

I've managed to do a Iframe that shows only certain part of the page with this code:

<div id="divContainer" style="display: block; margin-left: auto; margin-right: auto;">
     <div id="frameContainer" style="overflow:hidden;">
          <iframe src="http://www.cofm.es/informacion-corporativa/buscador-farmacias" scrolling="no" style="width: 1000px; height: 750px; margin-top: -330px; margin-left: -250px;" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br />

</div>

Source: iframe to Only Show a Certain Part of the Page

Now what I'm trying to do is to make the Iframe show on the 100% width on the screen. I've been able to do this with images with this code:

<img style="width: 100%; display: block; margin-left: auto; margin-right: auto; " src="http://i.ytimg.com/vi/ROv863DuJu4/maxresdefault.jpg" />

I'm trying to make the iframe adapt to the screen size like the image does.

Community
  • 1
  • 1
maeq
  • 1,073
  • 1
  • 12
  • 23

1 Answers1

0

Iframe is an inline element - You need to set css " display:block " - then you can make it 100% and it will scale - Hope this helps. here is an example - you would have to set the containing element to full width as well..

<iframe style='display:block;width:100%' src='http://someurl.com'></iframe> 

  https://jsfiddle.net/cqgfqgqk/
ratiorick
  • 572
  • 3
  • 7
  • If its not to much to ask, could you give an example of a iframe that shows certain part of a page and also has 100% width? I tried with display block and nothing – maeq Nov 15 '14 at 22:25