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.
Related
I have combined several large images into a Sprite. Each image when displayed full size, is larger than my iPad screen size. If there is a single image in the sprite, the full image is available to view. I simply scroll to the right or down to see the parts of the image which don’t fit on the screen initially.
If there are several images in the sprite, I can scroll right to see the part of the image which doesn’t fit on the screen initially, however the height of the image is truncated to fit the screen height, so I can’t scroll down to see the rest of it. If I turn my iPad from landscape to portrait the displayable image enlarges to the portrait height of the screen.
How can I fix this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="general.css">
<style>
#img1 {
background: url("bates-sprite.jpeg");
background-repeat: no-repeat;
object-fit: none;
width: 2049px;
height: 1537px;
}
#img1 {object-position: 0 0;}
</style>
</head>
<body>
<img id="img1" src="bates-sprite.jpeg" alt="Camberley Mail front page report">
</body>
</html>
I don’t know why the monthly image sprite behaved differently from the single image sprite, but simply putting the image inside a div solved the problem.
<div>
<img id="img1" src="bates-sprite.jpeg" alt="Camberley Mail front page report">
</div>
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 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>
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>
I've a website that I'm building which is 700px width on desktops and mobile. On the desktop the 700px div is centred. On mobile the 700px div just needs to fill the screen.
Test code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=700" />
<style>
div#wrapper
{
width:700px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="wrapper">
<img src="/test.jpg" alt="Test image 700px width in 100px strips" />
</div>
</body>
</html>
This works fine across desktop browsers and most mobile phones. However on my daughters cheapo smartphone the browser zooms right in and only displays about 350px.
How should I approach this issue. You would think that it would be an easy situation to resolve but it's proving not too be! Messing about with the other meta tag attributes (initial zoom etc) has no effect on this particular smartphone.
The Huawei phones browser is Agent: Modzilla/5.0(Linux; U; Andriod 4.2.2;en-gb;HUAWEI Y330-U01 Build/HuaweiY330-U01)AppleWebKit/534.30(KHTML, likeGecko)Version/4.0 Mobile Safari/534.30
Use this
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Explanation:
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Demo
Without view port
With view port
Read this - https://css-tricks.com/snippets/html/responsive-meta-tag/ and this http://www.w3schools.com/css/css_rwd_viewport.asp
I don't have an Android device to verify this, but perhaps this would be solved with a relative width and a maximum width:
<style type="text/css">
div#wrapper
{
width:100%;
max-width:700px;
margin-left:auto;
margin-right:auto;
}
</style>
max-width overrides width when its conditions are met, so a smaller display like that on your daughter's phone should use a full width while a larger display would only be 700 pixels wide.
(I added the type attribute to your <style> tag for completeness. Your code should render just fine without it.)
Try this, hope it will solve your problem
<meta name="viewport" content="width=device-width"/>
instead of
<meta name="viewport" content="width=700" />
I would set your CSS width to 100%, not 700px. It's generally best to avoid hardcoding dimensions when possible. Also as suggested by another answer, max-width could be useful as it overrides width when specified.
You could then use screen size media queries(https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) to put a border div around the image on large displays.
Add the below link inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Style Sheet
<style type="text/css">
#media only screen and (max-width: 699px)//media query for the resolution below 700px {
div#wrapper
{
width:100%;// this will took full width
}
}
</style>