Element in iframe with height: 100% strech - html

I'm fighting with this problem:
I have iframe in which I'm showing website, which has some html structure. And inside this structure is element, which has css property: height: 100%;
Problem is, that element stretch to iframes full height, anyway it shouldn't I think. Could you give me some idea, how to solve this problem?
Here is source code for iframe content:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/swiper.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/style.css" />
<link rel="stylesheet" href="https://www.zeerat.com/assets/front/styles/grid.css" />
</head>
<body>
<div id="overview">
<div class="overview slider swiper-container swiper-container-horizontal">
<div class="swiper-wrapper">
XXX
</div>
</div>
</div>
<div id="benefits">
<div class="grid">
<article id="article1" class="clearfix">
<div class="text col right">
<h2>People behavior in one picture</h2>
</div>
</article>
</div>
</div>
</body>
</html>
Here is source code, where I put an iframe:
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="1600" height="4000"></iframe>
</body>
</html>
Thank you very much for you help.

On the child page (the page inside the iframe) will be shown starting from the top left corner, so positioning the child page is usually not necessary. The styling of the iframe's dimensions on the parent page determines how much of the child page will be seen. The easiest and most effective way is to make the iframe responsive (able to adapt to changes of screen sizes and/or window)
<!DOCTYPE html>
<html lang="cs" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Titulek stránky</title>
</head>
<body>
<iframe src="iframe.html" width="100%" height="100%" style="position: absolute; top:0; left:0; right:0; bottom: 0; width: 100%; height: 100%;overflow: hidden; overflow-x: hidden; overflow-y: hidden;" allowfullscreen webkitallowfullscreen mozallowfullscreen ></iframe>
</body>
</html>

Related

Tooltips not working on IE10

I want to show tooltips on parts of an image. I have this technique where it puts a invisible div on the image with absolute positioning.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta http-equiv="X-UA-Compatible" content="IE=10" >
</head>
<body>
<div style="position:relative;">
<img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/>
<div title="HELLO" style="position:absolute; width:100px; height:100px; top:0; left:0;"></div>
</div>
</body>
</html>
but when I hover over, the tooltip does not show.
Does anyone know what's wrong? This same code works on chrome 59.
Thanks
this code seems to be ok on Explorer, Chrome, Firefox and Edge.
img tag has a different behaviour of div tag in Explorer.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta http-equiv="X-UA-Compatible" content="IE=10">
</head>
<body>
<div style="position:relative;">
<img src="http://blog.caranddriver.com/wp-content/uploads/2016/11/BMW-M2-lead.jpg"/>
<img style="position:absolute; width:100px; height:100px; top:0; left:0; border-width: 0px;" src="javascript:void(0)" title="Test" alt="">
</div>
</body>
</html>

Making an image fit to size of the html page using css

<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<link rel="stylesheet" href="movie.css">
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img src="images/rancidbanner.png" alt="Rancid Tomatoes">
</div>
</body>
</html>
so far i have succeeded with
img{
width: 100%;
}
but i want to it make it so only this image fits and not the other ones.
i tried doing it with
img.fit
on my css file, but this just returns it back to normal.
.fit img{
width: 100%;
}
should do it for you. The div's class name is fit, not the image's. Therefore img.fit won't work.
If your image had the class .fit then you could just do
.fit {
width: 100%:
}
If you remove class="fit" from div and add it to img then the effect will be the same for this image as you had for all images before.
You can Go little easier!
Just add width="100%" in <img> tag.
<!DOCTYPE html>
<html>
<head>
<title>TMNT - Rancid Tomatoes</title>
<meta charset="utf-8" />
</head>
<body>
<div class="fit">
<img width="100%" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR8g4PCYI2ssAVPKlJmC9q4T_k84PE7zOHqAWultSDb-BbSy5YfK-5P0I1f" alt="Rancid Tomatoes" >
</div>
</body>
</html>

How to insert a Picture and fit it in <head> tag

this is my problem:
<!Demo html>
<html>
<head>
<img src="html\111.jpg" alt="can't be displayed" align="center">
</head>
<body>
</body>
and i just want to fit the picture onto the screen
If I understand your problem correctly, you want the image to cover the screen, then this is the simplest solution to your problem:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="html\111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
</body>
But if your intention is actually to use the image as a background, I would strongly suggest adding it as a background image (with CSS) to the body element.
Edit:
With css:
html, body {
width: 100%;
height: 100%;
}
body {
background: url( html/111.jpg ) 100% 100%;
}
Also, don't forgot to link to your .css in your .html file.
<head>
<link rel="stylesheet" href="css/styles.css">
</head>
For inside a head tag......
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background: url(url of the image) !important; }
</style>
</head>
<body>
yourbody
</body>
</html
I think this is what you want!
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>
<img src="html/111.jpg" alt="can't be displayed" align="center" width="100%" height="100%">
</header>
</body>
In this snippet just replace src code with your link.
<!Demo html>
<html>
<head>
<style>
.img{
top:0px;
left:0px;
position:absolute;
height:100%;
width:100%;
}
</style>
</head>
<body>
<img src="http://wallpapersrang.com/wp-content/uploads/2015/12/wallpapers-for-3d-desktop-wallpapers-hd.jpg" alt="can't be displayed" align="center" class="img">
</body>

Position relative element in front of absolute element CSS

I'm stuck in a problem, I want to show the relative element in front of absolute element, I know z-index don't work with relative elements. How can I show the image in front of the strip.
http://jsfiddle.net/Q9EEv/9/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teset</title>
<style>
.container {
width: 1170px;margin:auto
}
.footer-elements{text-align:center;bottom:0;height:15em}
.footer-elements .content-b{text-align:center;position:relative;height:10em}
.footer-elements .content-b img.main-img{text-align:center;width:18em;margin-top:-3em}
.footer-elements .content-b .strip-m{background:#231F20;height:9em;}
.footer-elements .content-b .strip-border{width:100%;height:1.3em;position:absolute;top:0;left:0%;background-size:auto 100%;
background:url(http://i666.photobucket.com/albums/vv22/SincerelyBerry/HAIJYNX/backgrounds/stripes.png) repeat-x;}
</style>
</head>
<body>
<!-- container Start -->
<div class="container">
<br><br><br><br><br><br><br>
<div class="footer-elements">
<div class="content-b">
<div class="strip-m row">
<div class="strip-border"></div>
<img src="http://i252.photobucket.com/albums/hh15/liveyourlife815/stripes-1.png" class="main-img" alt="footer">
</div>
</div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/Q9EEv/9/
Absolute element is strip so I want it on back on that relative image.
Thanks
Here you go: http://jsfiddle.net/Q9EEv/10/
.content-b img
{
position: relative;
}
You solved it your self. But z-index does work on every positioned element (not static).

jQuery Mobile images auto-resizing

I'm new to this community: I'm trying to use jQuery Mobile to create a simple GUI in Windows Phone style.
I want to create some tiles with images and then I must adjust them to the screen width: I tried to do this with the style rule " style="width: 100%;" " but the border of the image is too heavy.
Here is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiles Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height">
<link rel="stylesheet" href="Framework\Theme\Metro.css" />
<link rel="stylesheet" href="Framework\JQM\S-1.3.0.css" />
<script src="Framework\JQ\1.10.1.js"></script>
<script src="Framework\JQM\1.3.0.js"></script>
</head>
<body>
<div data-role="page" id="Menu">
<div data-role="header" id="Menu\Header">
<h1>
Menu
</h1>
</div>
<div data-role="content" id="Menu\Content" style="padding: 2%">
<div class="ui-grid-a">
<div class="ui-block-a">
<img src="image.png" style="width: 100%;" />
</div>
<div class="ui-block-b">
<img src="image.png" style="width: 100%;" />
</div>
</div>
</div>
</div>
</body>
But the result is: http://img801.imageshack.us/img801/9474/6aoq.png
How can I fit the image to the screen size? (Something like this; http://img19.imageshack.us/img19/1305/f1y4.png)
I would try using css instead of jquery. You can accomplish what you're looking for with that. For example, you are using two images. You could set each one to a width of about 45% of the screen and add a border all in css. You can even have it dynamically scale based on screen size. It would probably be best to use div containers to organize it but this example should be enough to get you started.
I would try something like this:
<html>
<head>
<style>
<style type="text/css">
#images {
height: yourheightinpx;
}
#images img {
position: absolute;
max-width: 100%;
width: auto\9;
}
</style>
</head>
<body>
<div id="images">
<img src="yoursrc"><img scr="yoursrc">
</div>
</body>
</html>