I am using <iframe src="https://example.com" width="100%" height="610"></iframe>
i want to make the iframe height same as my browser, I don't know how, i tried the following and none of it works:
height="100%"
height="calc(100vh)"
also i src my iframe into my left nav bar and even i change my navbar height, still doesn't change iframe height even when i put height="100%".
Pls help me, i prefer using css over javascript, but if i have to i am happy to use javascript .
FYI you only need to use calc() when doing math, like calc(100vh - 100px)
vh is a part of CSS3 so using the height= attribute won't work (it only supports pixels or % in HTML4 and only pixels in HTML5); you need to use style="height: 100vh;" instead.
I would get out of the habit of using width, height, or any other attribute that changes the appearance of an element and use CSS exclusively, via either class or style.
Related
I'm trying to use <img srcset /> to load images based on the size they'll appear on the page, rather than based on the size of the viewport. Perhaps examples will help:
On any viewport, when the image is styled with width: 100% inside a 200px-wide <div>, img-200.jpg should load.
On any viewport, when the image is styled with width: 100% inside a 400px-wide <div>, img-400.jpg should load.
...etc.
I've done tons of Googling, but as best as I can tell, srcset is only used for changing images based on viewport size, not image size, if that makes sense. Is that correct? Or is there hope for what I'm trying to accomplish?
As was mentioned in the comments, this doesn't exist yet.
However, I've been thinking. If you don't mind a little trickery, there's a workaround.
We can use an iframe.
To the contents of an iframe, its width is the viewport. So then we can use the standard srcset tricks.
Let's say our img looks like this
<img src="https://placehold.it/200x100" alt=""
srcset="https://placehold.it/200x100 200w, https://placehold.it/500x250 500w">
using the 200x100 image at smaller resolutions (200px or less) and the 500x250 one at higher resolutions.
We can then put this in a HTML file with a zero margin around it, because the iframe expects an actual HTML document.
Now to avoid having to load multiple files, we can turn this into a data URL, which will look as follows:
data:text/html;charset=utf-8,%3Cbody style='margin%3A0'%3E%3Cimg src='https%3A//placehold.it/200x100' srcset='https%3A//placehold.it/200x100 200w, https%3A//placehold.it/500x250 500w
and all that will make our original HTML page look something like this.
Note that, to show it works, I included two iframes, which are identical in themselves. Only their CSS widths differ.
iframe {width:200px; height:100px}
iframe ~ iframe {width:400px; height:200px}
<iframe src="data:text/html;charset=utf-8,%3Cbody style='margin%3A0'%3E%3Cimg src='https%3A//placehold.it/200x100' srcset='https%3A//placehold.it/200x100 200w, https%3A//placehold.it/500x250 500w' alt=''%3E" frameborder="0">?</iframe>
<br><br>
<iframe src="data:text/html;charset=utf-8,%3Cbody style='margin%3A0'%3E%3Cimg src='https%3A//placehold.it/200x100' srcset='https%3A//placehold.it/200x100 200w, https%3A//placehold.it/500x250 500w' alt=''%3E" frameborder="0">?</iframe>
I'm using jQuery Lazyload Plugin. Before the images are loaded I use a dummy image as placeholder which is a 20x20 pixels blank PNG. Also I'm using jQuery wookMark which is a dynamic grid plugin. For this plugin to work I need the images to be in their correct aspect ratio so the plugin can calculate the suitable position of each grid element in the page.
I have width and height attributes on img tag set to the correct dimensions, but that doesn't have any effect on the dummy image and it will be shown as a square, no matter what.
I can use inline styles to set width and height for each image, but this approach will stop the image from being responsive in other dimensions.
Is there a way to give an image width and height in a way that it act like it is its real dimensions?
Here's the pen to look at:
http://codepen.io/anon/pen/iaIoJ
The only way you're going to get what you want is by using some javascript. You're already using jQuery so that will make it a bit easier.
Use the following CSS to begin with (as an example):
.myImage {
width: 300px;
height: 400px;
}
then when the images are loaded (in some sort of callback function I presume):
$('.myImage').css('width','100%');
$('.myImage').css('height','auto');
Alternatively, you can work with a placeHolder css class that has this height and widht, and then $('myImage').removeClass('placeHolder'); to clear it from the images.
I found a good way for it.It's not going to be pure css, but that's fine by me :)
My solution is to set the image height to 0 and use padding-bottom to maintain the aspect ratio:
<img src="./blank.png" style="height:0;padding-bottom:133.333%">
And also having a class for the img tag when the actual image is loaded:
img.loaded {
height:auto !important;
padding-bottom:0 !important;
}
Here's the pen for this example: http://codepen.io/nOji/pen/yoshA
Hope you find it useful.
I am working on a site where certain sections have 100% height. To achieve this I am using the new css3 unit vh as a min-height (100vh).
In each section there is also a element which is absolute positioned and aligned with the bottom of the page. You can see an example of it here.
The problem which occurs is that on a smaller screen the button shows up upon the text.
I know that I could e.g. let the button disappear on smaller screens with #media; instead I would like to know if there is a css3 possibility in doing something like this:
.element {
min-height: 100vh && 200px;
}
Any other css tricks too achieve this are also appreciated (I can change the markup).
No, it makes no sense to use like that. You must use media query.
If it was to be added like you mentioned it would just sense if vh is undefined px would take.
But to say, it would never be applied like so.
I'm trying to create a fluid-layout in html, containing images.
For now, I support 2 sizes for the layout. The default layout is used to display a 1000px wide site. If the screen is wide enough (wider than 1200px), I enhance many aspects with css media queries.
I have a DIV container that is 600px wide for the default layout, and 700px for the enhanced layout.
There is a random image inside, for which I know some metadata (width and height). I may need to downsize the image if it is too large for the container.
So I use this code to have a fluid-layout
<div class="container">
<!-- for a 650px/400px image, the downsized version is 600px/369px -->
<img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>
and the style
#media screen and (min-width:1200px){
.container IMG {
width:auto !important;
height:auto !important;
}
}
Here is how it works:
In case of the default layout, the inline style applies. So the image is down-sized to 600px/369px to fit the container.
Otherwise, the media query style applies, and the image is at its default width/height (I know the image is never wider than 700px so all is fine).
My problem comes from the loading state of the image and the space reserved by the browser. The behaviour of chrome/firefox is the same but is quite strange for me. Not tested with IE (not my priority actually)
For the default layout, no problem, the inline-style still applies. The browser displays a white space corresponding to the image.
For the enhanced layout, the "auto" sizes applies. But the browser does not know the natural size of the image while it is not fully loaded, and it appears that "auto" is equivalent to 0px. It would be perfect if the width and height attributes set for the image applied. But it is not the case. The result is that no space is reserved for the image, which is not the behaviour I want.
A first solution I found is to add another inline css rule for the image. If I add "min-width:600px; min-height:369px" the reserved space for the image is always 600x369 pixels, instead of 0 pixels for the enhanced layout. That's better, but not perfect yet.
-- What do you think ?
Is it possible to "reset" the css instead of overriding it with the "auto !important" rule ?
Should I use an other approach ?
I may use some javascript, but I think it is a bad idea to rely on it. Actually, I may have a lot of containers similar to the one described above. I prefer an automatic solution (css is great for that).
you can just set the width or height to initial.. that resets the Value on override..
The general approach that I've seen thrown around for responsive images is to have a parent element (like .container) change sizes with media queries. In your markup remove the width and height attributes, and then in your CSS add:
img {
width: 100%;
}
As your parent element's size is dictated by media query rules, your image will grow accordingly.
I'm bringing this up because it looks like you want to use the same image file, but just have it grow/shrink. The major drawback is that a larger image could load on a mobile device screen, and add to page load. This is the major technical hurdle facing Responsive design currently, and there is great debate about the best way to address it.
Use .container IMG.someClass { ... } then you can remove the class name from the image to remove the CSS styling.
Any ideas for using max-height on a borderless/scrolless iFrame so if it ends up being too tall the browser doesn't render a giant black area to fill in the rest of the iFrame?
I've tried setting height="100%" and max-height="xx" but that doesn't seem to work.
Many Thanks!
Your use of height="100%", using the = operator, suggests you're trying to use in-line attributes. This can work, but usually works better with absolute measurements (so 700px rather than a percentage). max-height isn't a valid attribute, so far as I'm aware, of any element except in stylesheets, so I'd suggest that you use CSS:
iframe {
min-height: 200px; /* or whatever */
max-height: 500px; /* or whatever */
}
You can, if you must, also use in-line styles, which would yield <iframe src="..." style="min-height: 200px; max-height: 500px;">
Also, while you can use percentages, to give max-height: 80%, this does seem to require that the parent element has a defined height of its own (I'm not sure if it's all browsers, or just one or two, but either way it seems a reasonable expectation in order that the browser can work out what 80% actually is).
A good JavaScript based answer seems to be the first solution from:
https://www.geeksforgeeks.org/how-to-adjust-the-width-and-height-of-iframe-to-fit-with-content-in-it/
Resizes the iframe to suit the content. I've found that you have to manually add a bit extra for height... go figure, but seems to work.
Here's the full mark-up and JS that works for me based on that solution:
<iframe src="/app/index.html" style="width:100%;" frameborder="0" id="Iframe">
Oops, your browser doesn't get Iframes. Click Here to proceed.
</iframe>
<script>
// Adjust the iframe height to exactly as much as required by the content
var frame = document.getElementById("Iframe");
frame.onload = function() {
// add extra 50 pixels - in reality need just a bit more
frame.style.height = (50+frame.contentWindow.document.body.scrollHeight) + 'px';
// not sure if this is really required.
// set the width of the iframe as the width of the iframe content
frame.style.width = frame.contentWindow.document.body.scrollWidth+'px';
}
</script>