I've visited lots of posts but none of them gived me an answer that works.
I want to resize an iframe to the parent, for example a div.
The iframe tag resizes dynamically the width, but not the height.
How can I dynamically resize both?
If I write: <iframe src="http..." width="100%" height="400"></iframe> it always is 400 px of height.
But if I put a % there too it doesn't resize properly.
And if I want to have the iframe width and height of the page it is referencing in src, how can I do it?
Related
This question already has answers here:
Adjust width and height of iframe to fit with content in it
(35 answers)
Closed 4 years ago.
I have a site where effectively i want to create a banner across the top and beneath display another site in it's entirety without an additional scrollbar within the page. So i've considered iframe but i cannot get it to display correctly. I want the page to load to the full height of the subservient pages content and alter accordingly. I want the simplest code possible to avoid confusion as my understanding of this is limited. This is the code i have tried
<iframe src="https://edition.cnn.com/" width="100%" height="100%" scrolling="no">
iframes are not supported by your browser.
If i put in say 5000 as the height i can display most of the page without a fixed scroll frame. If i put 100% as the iframe height the iframe is is very short like 150 high (a guess), dunno why it defaults to this small size if its 100%.
So is there a code i can add to the above so that it automatically adjusts the iframe to the full height of the content it is displaying.
Any pointers very much appreciated.
Thanks
p.s i used cnn purely for example purpose.
If you try to set the height to a 100%, this will mean that the element will try to fit a 100% in given property of given element's parent element. So for example, if the iframe height has been set to a 100% and the parent element has a height of 400 pixels (400px) and no other elements are present in given parent element, then the iframe will have the exact same size (not counting any whitespace that might occur).
For reference see my fiddle:
.iframe-container {
height: 400px;
}
<div class="banner">
Banner
</div>
<div class="iframe-container">
<iframe src="https://edition.cnn.com/" width="700px" height="100%" scrolling="no">
</iframe>
</div>
<div class="something-else">
Add here something else eventually...
</div>
JSFiddle
In this example, the height has to be expressed in pixels on the (parent) element with the class called iframe-container in order for the iframe to have a height assigned to it.
I have a set of images for which I am specifying explicit width and height attributes in the HTML, so that space is reserved for them while the page is loaded (this avoids page "jumps" when images take longer to load).
On the other hand I don't ever want the images to take more space than the available width of the viewport. So if the viewport is too narrow the images should resize. For this I added the following CSS styles:
img.resizable {
max-width: 100%;
height: auto;
}
The problem: As soon as I set height:auto in the CSS, space for the image is not reserved anymore during page loads and I get the page "jumps" effect. If I remove height:auto, then if the image resizes the aspect ratio will not be preserved. Any suggestions on how to approach this?
A non-Javascript solution would be preferred if possible.
I solved this with hints from this blog post that explains how to use CSS to set the aspect ratio of a fluid element.
Basically the solution looks as follows:
<div style="width: [width]px; max-width:100%; position:relative">
<div style="padding-top: [aspect]%"></div>
<img style="position:absolute; top:0" src="...">
</div>
where: [width] = image width, [aspect] = 100 * image width / image height
Basically with this the browser has the following information:
The initial width of the image (set in the outer div via width)
The aspect ratio (set in the inner div via padding-top)
The resizing behaviour (set in the outer div via max-width)
With this I achieve the desired behaviour: No page jumps upon initial load, and automatic resizing (keeping the aspect ratio) for narrow viewports.
I am trying to place the text content on an image loaded from assets:
<s:Image id="mainB" depth="1" height="100%" width="100%" source="assets/img/board.png"/>
simageid.width
simageid.height
When I try to get the width and height on mobile devices, it returns the image's rendered height on screen. On tablets, it doesn't return the rendered height. When placing the element dynamically based on height and width, it gets misplaced on tablets.
How can I consistently get the rendered height for the image across all mobile platforms?
I'm using Flex 4.6.0.
Try listening for the updateComplete event before you grab the height or width of an Image in flex because it has to asynchronously load it first.
I'm using this code to embed a page into my website at 1300x700 pixels
<iframe src="http://example.com"
width="1300" height="700"></iframe>
Is there a way I can make it stretch or shrink to match the size of the browser window?
(preferably with -30px at the top for the navbar, currently have this set up with css)
use percentages for width/height instead, and then use pixels to set the margin with the navbar
I have to show an exterior page in the iframe. The iframe's width is relatively small (about 400px) and cannot be changed. The problem is that when I scroll the iframe horizontally I can see the background of the contained page is not drawn. But some pages are rendered normally.
The code to reproduce is very simple:
<iframe src="http://ubuntu.com"></iframe>
<iframe src="http://britannica.com"></iframe>
<iframe src="http://linktiger.com"></iframe>
<iframe src="http://youtown.com"></iframe>
<iframe src="http://pagefreezer.com"></iframe> <!-- ok -->
<iframe src="http://imdb.com"></iframe> <!-- ok -->
A picture is worth a thousand words: http://jsfiddle.net/rKfNA/3/
The background of these pages is specified using the ordinary background css property.
I've reproduced this in the all major browsers under ubuntu, android and windows.
Why the iframe is not showing them right? Is this a rendering engines' bug? Or is this 'by design'?
And what can I do to show content in the iframes right?
Could you help please?
The background is set on the body. The body is the height en width of the iframe.
It is a bug made by the developers of the site. You can put an iframe in a div. The iframe exactly needs to be the width and height of the site you are showing. There is no other way.
Example: http://jsfiddle.net/rKfNA/4/ (the widths and heights of the iframes are not the width and height of the site inside it, so there are double scrollbars)