I want to put an iframe onto my page with a another div over top of the iframe to go back to a specific page, however, I cannot seem to get the iframe to go full screen (height:100% and width: 100%). Is there any work around to get the iframe in full screen?
I have already tried setting the height to window height using jquery, however, its not working.
<style>
iframe {
height:100%;
width:100%;
}
.goback {
width:100%;
background-color:transparent;
transition:.5s;
position: absolute;
z-index:3;
}
.goback img {
padding:5px;
}
.goback:hover {
background-color:white;
}
</style>
<body>
<div class="goback">
<img src="../../assets/goback.png" alt="goback" height="50px" width="50px" />
</div>
<iframe src="https://music.youtube.com/"></iframe>
</body>
You should modify your css (Set body margin to 0, position iframe absolute and set the border to 0)
Example:
body {
margin: 0;
}
iframe {
position: absolute;
top: 0;
left: 0;
height:100%;
width:100%;
border: 0;
}
Use Viewport width and height instead of percentages
iframe {
height:100vh;
width:100vw;
}
use the width:100%; height:100vh;
of iframe.
Related
I'm trying to make an iframe that will show the full page of the external site with a top div. The problem is all browsers are ignoring the width & height css.
This is what my css is
iframe {
position:fixed;
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
z-index:999999;}
When you view the site it ignores the width and height which makes iframe not full screen. When I view the source in the browser the width & height are missing. Any fix to this?
You can use vh and vw uits for that. 1vw is 1% of viewport width, and 1vh is 1% of viewport height:
iframe {
position:fixed;
width:100vw;
height:100vh;
border:none;
margin:0;
padding:0;
overflow:hidden;
z-index:999999;
}
By the way I looked at the site by link. It has a little broken style for iframe:
iframe {
position: fixed;
width: 100;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
}
width value has no units, height is absent.
Following code works:
iframe {
position: fixed;
width: 100%;
border: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index: 999999;
height: 100%;
}
What I want is for the image to scale down as the browser window scales. Would making it a background image be a better solution?
#home-feature5 {
height:618px;
width:1210px;
position:relative;
}
.photo {
bottom: 37px;
position: absolute;
z-index: 1;
left: 20px;
}
.photo img {
max-width:100%;
height:auto;
}
.bg {
background-color:#f88b5c;
width:100%;
height:95px;
bottom:0;
left:0;
position:absolute;
}
Fiddle: http://jsfiddle.net/9LLr7m6w/
I think you should make the whole site responsive:
#home-feature5 {
height:618px;
width:1210px;
position:relative;
max-width: 100%;
}
fiddle
Set the width attribute of the image as a percentage instead of fixing it. Doing so, it should be able to scale accordingly.
For example, let’s say you have an image that has a natural size of 1210px x 618px in a 1400px wide document. Below 1400px, the document will be fluid. The calculation of how much width the image takes up as a percentage of the document is easy: (1210 / 1400 ) × 100 = 86.43%
When I want the image to scale down with the page I do something like this.
body{
width=100%;
}
#home-feature5 {
height:618px;
width:1210px; //might want to change this to a percentage
position:relative;
}
.photo {
position: absolute;
left: 20px;
width:50%; //the div will be 50% of its container (#home-feature5)
}
.photo img {
width:100%; // will be 100% of its container (.photo)
}
<!-- with html something like this -->
<div id="#home-feature5">
<div class="photo">
<img alt="whatever missing" src="whatever.png">
</div>
</div>
I'm using the classic responsive design trick of applying a percentage based padding-bottom and zero height to an element in order to make it maintain a certain aspect ratio. Inside this element is an iframe with a height of 100%.
This works an intended in chrome, but firefox and IE doesn't show the iframe, as if it would have no height. I have tried applying box-sizing: content-box as a workaround for IE, but it did nothing.
Fiddle: http://jsfiddle.net/jgsnK/
How can I make the iframe behave like in chrome in the other browsers?
What you'll need to do is position your iframe using position:absolute; with position:relative; on your .wrapper
.wrapper {
position:relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
}
.frame {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
width: 100%;
height: 100%;
}
Have a look at this DEMO
FURTHER:
If you plan on doing something like this regularly throughout your document I would suggest adding an internal div that does this same function and leave your iframe without the absolute positioning
HTML
<div class="wrapper">
<div class="abs-inner">
<iframe border="0" scrolling="no" class="frame" src="http://images.fineartamerica.com/images-medium-large/7-abstract-background-les-cunliffe.jpg"></iframe>
</div>
</div>
CSS
.wrapper {
position:relative;
height: 0;
width: 100%;
padding-bottom: 56.25%;
}
.abs-inner{
position:absolue;
top:0;
right:0;
left:0;
bottom:0;
}
.frame {
width: 100%;
height: 100%;
}
Something like this DEMO
The height: 100%; means match the height of element with the height of its parent i.e. 0px. You can use relative + absolute positioning to achieve the desired result i.e. match the height with the height of the element plus padding:
.wrapper {
width: 100%;
padding-bottom: 56.25%;
position: relative;
}
.frame {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
Demo here
Note: for pixel perfect results you might need to zero-out the marginwidth, marginheight and frameborder attributes on the iframe.
I'm trying to restrict the height of images within a table. The reason for the table is to allow these images to be aligned vertically and horizontally to the center of the page. The problem I have is that images larger than the browser height disappear of the bottom of the page enlarging the table, I'd like the image to have max-height:100; and scale to fit. It works with the width, but not the height.
Here's what I have so far...
<div id="table">
<div id="cell">
<img src="image.jpg"/>
</div>
</div>
and
html, body{
height:100%;
margin:0;
padding:0;
}
#table{
display:table;
height:100%;
width:100%;
}
#cell{
display:table-cell;
vertical-align:middle;
text-align:center;
background-color:#ccc;
}
img{
max-width:100%;
max-height:100%;
}
You can achieve this without using a table. Here's the basic outline, HTML:
<body>
<img src = "image.jpg"/>
</body>
CSS:
html, body {
height: 100%;
width: 100%;
}
body {
position: relative;
}
img {
position: absolute;
margin: auto; /*make sure it's centered both vertically and horizontally*/
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
}
And a little jsFiddle demo: little link. Note that body must have position: relative; for this to work.
I hope this helped!
I'm working on a webpage, and in it I use a background image that I would like to be stretched to the full width of the window, because I have text on it, which I want to be in a fixed position no matter what the screen resolution is. I'm looking for a CSS implementation, though if Javascript is my best bet, I will be wiling to use that.
Here's what my page looks like: http://dl.dropbox.com/u/9134840/demo/windowsxp.html
Unless you're using a 1080p monitor, the background image doesn't fully extend from edge to edge, and leaves a little white space. Any help would be appreciated.
html {
}
body {
}
#img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.title {
position:absolute;
top:180px;
left:350px;
width:700px;
color:Purple;
font-style:oblique;
font-family:cursive;
text-shadow: 1px 1px;
}
#pre {
position:absolute;
top:280px; /* in conjunction with left property, decides the text position */
left:150px;
width:700px;
font-size:large;
font-family:cursive;
}
#header {
position:absolute;
top:530px;
left:450px;
width:700px;
font-size:x-large;
font-family:cursive;
}
#sub {
position:absolute;
top:580px;
left:160px;
width:1090px;
font-size:x-large;
font-family:cursive;
}
HTML
<div id="background">
<img src="back2.png" id="img" class="stretch" alt="" />
Use background-size property of CSS
Docs: https://developer.mozilla.org/en-US/docs/CSS/background-size
You can extend width past 100%. One option to try.
Otherwise I agree with techfoobar, use the background css property, specifically background-size.
Set margins to 0 and widths to 100% for your image and its containers. Using a <div> is not necessary. For example:
body
{
top:0;
left:0;
right:0;
width:100%;
}
#background
{
top:0;
left:0;
right:0;
width:100%;
}
#img
{
top:0;
left:0;
right:0;
width:100%;
position: absolute;
}