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.
Related
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.
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...
No matter what I do I cannot get the background-image property to work correctly in IE8.
I've even stripped everything down to the bare minimum and just have a functioning HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to Fritz PT!</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="myClass">
</div>
</body>
</html>
with the CSS for the class as follows:
.myClass {
background-image: url(/images/header_image_fallback.gif);
height: 300px;
width: 300px;
}
but still nothing is showing up in IE8 and lower.
I have tried multiple image formats (.gif, .jpg, .png), putting quotes around the folder path ('/images/header_image_fallback.gif') and then HTML. Does IE8 not support the background-image property? If it makes a difference I'm currently testing this out in VirtualBox.
Okay, if anyone else is having the same problem as me I found the issue. Apparently, even though the syntax works in all modern browsers, you need to make sure you have the ../ for the folder path for IE. So in my original code (which works in modern browsers) I had the folder path as seen above /images/header_image_fallback.gif however, for IE I would need to do this ../images/header_image_fallback.gif. My images folder is up a directory from my css file and I suppose that matters for IE as opposed to modern browsers
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.
I know this is probably one simple mistake I'm missing, but a second set of eyes would be great. The following HTML and CSS is connecting on Firefox and IE, but not Chrome. I'm testing it with the font size. It is like Chrome is ignoring the CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Put A Title Here Later</title>
<meta name="description" content="What is this about?">
<meta name="author" content="My Name">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Test</p>
</body>
</html>
CSS:
p {
font-size: 100px;
}
Chrome likes to cache stylesheets. That's the only thing I think would be different here given the code provided. When you have this page loaded in Chrome, try pressing Ctr + Shift + R for a hard reload.
If that doesn't work, press F12 to open the inspector, then go back to your main browser window and click and hold the reload button until a sub menu pops up. From there select "Empty Cache and Hard Reload".
Also, be sure that you have actually typed this CSS and not copy and pasted it. It's rare, but I have seen a copy-and-paste introduce hidden characters that caused strange browser errors.