I'm having trouble with showing an image on an iPhone. Currently, I have a pretty large image, around 9000x4500. I'm trying to show this image resized in an iPhone. I'm working with the simulator now and it just will not show up. I have some pretty simple code here (using phonegap):
<!DOCTYPE HTML>
<html>
<head>
<script charset="utf-8" src = "jquery-1.10.1.min.js"></script>
<script charset="utf-8" src = "cordova.js"></script>
<style>
img.Image {
width: 100%;
max-width:100%;}
</style>
</head>
<body>
<img src = "FloorPlans/plazaone.png" class = "Image" />
</body>
</html>
And here's a screenshot of what my simulator looks like:
Anyone know how to fix this issue?
Figured out why it wasn't working. It seems that if one tries to put an image on iOS through HTML, there is a certain limit of what resolution it can handle (not for jpgs it seems, but for GIFs and PNGs, might have something to do with transparency). All I had to do was resize my pictures down to 50% of their original size and they worked.
Related
In a minimal HTML page with <img src="example.png">, I only see the original quality if I zoom to 80% - reproduced in Firefox, Chrome, and Edge. Using srcset="example.png 1.25x" fixes this.
This appears to be due to changing my system display setting (Windows 10):
yet, other sites work fine. I've read that one way's to provide multi-resolution images via srcset, but suppose that's not an option. (I tried providing the same image at 1.25x, which worked for me, but broke it for a user with 100% system zoom.)
How else can I address this? It's just about resizing the image appropriately, but don't know how to do this portably with HTML/CSS.
MRE: Code + image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<img src="example.png">
</body>
</html>
^ this is blurry for me unless I zoom to 1/1.25 = 0.8.
No matter what I try, images won't display in my browser. I've made sure file names were matching, that the directories were correct, etc. I've tried different images just to see if anything will load.
Here is an example of my code. The image and index file are in the same folder. Can anyone help?
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src=“rollingrick.jpg” alt=“Rick”>
</body>
</html>
Images does not display in firefox and in chrome. Safari works fine. I code the image as a background image in CSS and coded the image in HTML. When I preview the page, the image can only be seen in safari. Why? This occurred when I bought a new computer.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<img src="img/background.png" alt="">
</body>
</html>
I found out why the image was not showing in firefox and chrome. The image itself was getting errors. I found out when I tried importing the image into photoshop, photoshopped has an error message saying "Could not place “background.png” because the file-format module cannot parse the file." So I made a new image in the html, and the image displayed on the browsers.
My problem: I'm writing the code for a website that calls up an image, but when the image shows up the web browser displays a time stamp that is displayed under the image I call up.
My question: I would like to know why is a time stamp being displayed under the image I call up?
Here is my code:
<center><img src = "pirate flag.jpg" height = "150", width = "70"/><center>
enter image description here
You have additional code underneath this line of Html which instructs the browser to display the time or the image needs to be altered in a image editor to remove the date.
Use the following code to display the image without time stamp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<center><img src = "pirate flag.jpg" height = "150", width = "70"/><center>
</body>
</html>
I have a web page, the problem is that IE and MS-Edge doesn't seem to load some images. Hence I tried working on just one image, given below. This also doesn't get displayed. Everything works fine in Firefox, Chrome and Opera. Could you please tell me what the problem is??
the image
<html>
<head>
<title>Test</title>
</head>
<body>
<img src="./images/services/2.jpg" />
</body>
</html>
js fiddle
I suggest you double check the path of the image. Maybe it helps if you drag 'n drop the image directly to IE or Edge and have a look at the address displayed in the browser...