HTML img garbled until I selected the image
I have a logo in a tag <img>
and it gets done smaller with the following css.
#logo{
position: absolute;
max-height:82px;
top: 24px;
left: 24px;
height:auto;
width:auto;
display:block;
}
The image is loaded like this:
<img id="logo" src="~/Content/images/OriginalLogo.png" />
But something strange happens in Firefox on page load.
The image looks distorted as follows:
Then when I highlight the image in the browser, the distortion disappears:
I tried to disable hardware acceleration in the browser and it didn't work.
I used the logo SVG
and the same results.
So this must be a software problem, is there a way to load the image in HTML
so Firefox doesn't? Clearly this cannot be correct, because websites look terrible if all images are distorted like this.
Note . This is just a snippet of a logo image, I used the Windows shutdown tool and is for demonstration purposes only.
UPDATE1 . When using a file, the SVG
image remains distorted even if I select it.
UPDATE2 . When I open the site in IE, the same thing happens, but with the logo .png
, even if I select it, it still remains distorted.
UPDATE3 . Tried loading the webpage on 3 different computers and this same problem still persists.
UPDATE4 : Resize the actual image to the required size and distort it. Then tried to just scale the image from original size to half its size and the same problem persists. I don't want to create multiple files of the same image, but different sizes.
source to share
Have you tried using moz to resize the image, not the standard CSS attributes. For example, to resize an image to 50% of its width and height as you suggested ...
#logo .img {
/* For Firefox specifically */
-moz-transform: scale(0.5,0.5);
/* For the other browsers */
-ms-transform: scale(0.5,0.5);
-webkit-transform: scale(0.5,0.5);
transform: scale(0.5,0.5);
}
I'm not sure if this should affect the result, but it might be worth trying if the browser changes differently.
source to share