How to fix picture being flipped horizontally? - html

When I display certain images (specifically those with a larger height than width), they are flipped horizontally (90deg). Is this a bug in HTML?
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>This is my code</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img width="500px" src="testpicture.jpg">
</body>
</html>

Probably it flips not the image itself but the page as a whole due to the viewport setting. You can check that by adding text and watching whether the whole page turns 90 degrees.

Related

Setting an HTML page to a fixed resolution

I'm displaying an HTML overlay on a 1920x1080 stream.
Im trying to create a simple HTML page that has a centered image that shows on top but whenever i display it it's somewhere on the bottom right side.
This is my code, I rather not use CSS if that's an option
What am i missing?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<img src="https://s10.gifyu.com/images/once-30-sec-5-min-99.gif" alt="Computer man" style="width:400px;height:100px;padding-bottom: 350;padding-right: 200px">
</center>
<script>
</script>
</body>
</html>
I don't think you can create a fixed resolution only using HTML
but you can put styles in the HTML image tag with maximum height and with instead of linking it to a CSS page
<!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.0">
<title>Document</title>
</head>
<body>
<img href="address of image" style="width=100%; height:100%">
</body>
</html>

HTML Canvas Element wont show up

<!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.0">
<title>Inversion</title>
</head>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<body>
<input type="button" onclick="loadlevel()" id="levelsel">
<canvas id="mycanvas"></canvas>
<div
id="message"
> Hi </div>
</body>
</html>
Here is my code. When I delete
<canvas id="mycanvas"></canvas>
the button and the message "Hi" shows up. When that section is included, nothing shows up. Eventually I want it to show a series of 32x32 pixel images to make a map for a simple game. I am using Chrome and it is up to date. I also have a CSS file that should be making the height and width of the canvas 832px and 672px respectively.

How to open a local file in html?

Hi i started learning html a say or two ago and i was just messing around with some features when i thought of making a website which stored my school stuff in a arranged manner then i wanted to make a button that opens a local file but i just couldn't make it happen but i tried searching it on web but nothing worked for me
here is the code
<!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.0">
<title>E</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>body{background-image: url(x.jpg);
background-size: cover;}
</style> <div id="red">
<button><a src="C:\Users\laksh\Mywebsite\jkoj.html">jkoj</a></button>
</div>
</body>
</html>
don't use src attribute in a tag, use href in place of src

Page is wider and taller than viewport by default on mobile Safari

I have the following blank HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
When I run this via localhost inside iOS Simulator Safari, I get this:
Notice the scrollbars, which hopefully indicate how much wider and taller the page is than the viewport. This is despite my meta tag placed in the head.
The same cannot be said for desktop Safari, only when run on mobile Safari like this.
Why is this so wide and tall by default, and how do I ensure it's no larger than the viewport by default, without adding a bunch of CSS?

Opera Mini 8 on iOS 7 has strange page rendering with meta viewport tag

After update Opera Mini on iOS to 8+ version, there is a strange render bug in landscape orientation:
Example on screenshots(jsbin), html only:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div>
Any big text here...
</div>
</body>
</html>
You can reproduce it with jsbin example:
Open in portrait orientation jsbin example in Opera Mini 8 on
iOS 7 - the page width is 100% of screen width
Rotate to landscape orientation - the page width is more less than
100% of screen width
Scroll to bottom - there is a free space after page
How can I fix this?
The problem is in <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">.
If I remove it in html(jsbin) - all looks fine. But user can scale now and on landscape orientation the page is zoomed.
HTML without this ugly behaviors:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
</head>
<body>
<div>Any big text here...</div>
</body>
</html>
EDIT:
Opera Mini developers answer to my letter. This is fixed in 8.0.2 version