I am trying to embed pdf in my html page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>GetPDF</title>
</head>
<body>
<object data="/Content/Exams/2016/T205_16.pdf" type="application/pdf" width="100%" height="100%"></object>
</body>
</html>
but when I run this I'm getting width of 100% (good), but the height is only like 100px and not 100% as expected.
By default HTML block elements (including the <html> and <body> elements) are only as high as their content. That is, they 'shrink' to fit the height of their content. The PDF object has its height property set to 100%, but since this is 100% of its parent, not the viewport, and the PDF's parent is shrinking to fit content, the PDF object will display at its minimum height.
You need to set the PDF object's parent (the <body> elements) to be the height of the viewport. This is done easily with CSS - simply set the <html> element's height CSS property to 100% to make it fill the viewport, and then also set the <body> element's height to 100% to fill the <html> element.
Add this code to your <head>:
<style>
html, body {
height: 100%;
}
</style>
Related
I'm trying to make an iframe that stretches to the full width and height of the page but when using "width:100%" I get a too large iframe as shown in the image.
This is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
</style>
<body>
<h2>Text example to show that the width is too large and the content is out of it</h2>
<div class="container-fluid">
<iframe src="index.php" style="width:100%;height:1500px;overflow:hidden; border:none;"></iframe>
</div>
</body>
</html>
Most likely the container element (body, main, content, whatever) has a left and right padding. Use the browser tools to inspect alle lements that could be responsible for that. If you find it, try to remove that padding. If you can't for some reason, use width: 100vw for the iframe and apply a negative margin-left to it that has the same value (but negative) as the left-padding of the container element.
So, for example, if there is a padding-left: 30px on the body, apply margin-left: -30px (and width: 100vw) to that iframe.
In the following piece of code, I have attempted to make the width of a picture (a red square) equal to that of my — up to date — browser's viewport. However, the size of said picture is far from the latter's (as can be seen in this picture). The picture is 1560px high and 1560px wide.
I've tried every potential solution I could find online, including using the <picture> tag with the sizes attribute or trying to change the picture's height with vh instead, and nothing worked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>foo</title>
</head>
<body>
<img src="bar.jpg" width="100vw" alt="bar">
</body>
</html>
How can I fix this sizing issue while keeping the width relative to the viewport (and therefore not using a fix such as width: 100%;)?
The <img> width attribute is always unit-less, and refers to pixels.
width: The intrinsic width of the image in pixels.
To apply a width with vw units, you must use CSS.
<style>
.full-width {
width: 100vw;
}
</style>
<img src="bar.jpg" class='full-width' alt="bar">
You need to use the style property, style="width:100vw", not the width attribute. The width attribute is always in pixels, so width="100vw" is translated into width="100px"
I want to tile an image through the entire web document which I want to print. I have used background property to tile that, but I have to set the z-index property to make that image placed over all elements of the web page. Help me solve this.
stick it to the root style
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root
{
background-image:url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRxExzbsZCvO6lpE1tll_7pQLB5nd4RkWkrMannssfhAYni_Ct");
opacity: .4;
}
</style>
</head>
<body>
<div id="overlay" onclick="off()"></div>
<div style="padding:20px">
<h2>Overlay</h2>
<p>Add an overlay effect to the page content (100% width and height with background with 40% opacity).</p>
<button>some button here</button>
</div>
</body>
</html>
Suppose we have the code
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
</body>
</html>
When we are inserting images using HTML, do we need to include the dimensions, width and height. If we don't need to, does it automatically set a default size for the image.
The default size for images in HTML is the actual size of the files on the filesystem. If you want to set the height and width of an image, here is how I would do it (adapting your code):
<!DOCTYPE html>
<html>
<head>
<style>
#imageId {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" id='imageId'>
</body>
</html>
And set the size dimensions (height, width) to whatever you want
(Everything is tested in the latest firefox.)
This html-code creates an almost screen-filling red box:
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
But adding a doctype declaration disables relative heights and makes the div's height zero:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
Why is this? In particular, I don't get why browsers consider relative heights in a document without doctype, since they don't in explicit html ones.
A doctype enforces a certain set of standards for the browser. If a page does not include a doctype, browsers will usually use some kind of quirks or transitional mode, which is more lenient about markup mistakes (but is bad practice and may display items incorrectly).
Essentially, strictly speaking, you can't set that element to height 100% using that browser's set of standards. It'll try to predict what you wanted to do if you don't include a doctype or include a transitional one and adjust the page's styling accordingly.
You can do it this way: http://cdpn.io/aHlCd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
div {min-height: 100%; background: red;}
</style>
</head>
<body>
<div></div>
</body>
</html>
You can also just set height on the div rather than min-height.
The above is the answer to why, if you were looking for a fix, setting the position to absolute and applying top,right,left and bottom should do the trick:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position: absolute;height:100%;background-color:red;bottom: 0;top: 0;right: 0;left: 0"></div>
</body>
</html>