I have the following code to create a rollover effect in HTML:
<img src="images/facebook.png"
onmouseover='this.src="images/facebookActive.png"'
onmouseout='this.src="image/facebook.png"' height="32px" width="32px"/>
It starts out fine, however upon hovering over it, it goes back to its original size (500x500). I have attempted to add height="32px" width="32px" to each attribute, however it doesn't seem to help. Also, by decreasing the size of the image using GIMP, quality is lost and it becomes more pixelated. Any help on this situation?
I tried to reproduce your scenario but I'm unable to do that. So can you edit this JsFiddle to reproduce your issue. try to use your images.
<img src="http://netdna.copyblogger.com/images/flogo.jpg" onmouseover='this.src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ6y qrcyQQxC6hISHmE37Yk2IUsOQtACy8NvcQgxMA0Uk3er5y"' onmouseout='this.src="http://netdna.copyblogger.com/images/flogo.jpg"' height="32px" width="32px" />
It seems to be working fine. Also Try re sizing the image using PNGGauntlet
Have you tried setting the this.width and this.height in onmouseover and onmouseout?
Related
I am currently trying to update my Website using the new loading="lazy" attribute as shown here: https://web.dev/native-lazy-loading
As seen in the video, everything works as expected, but compared with my waterfall diagram in chrome, it doesn't.
How it looks:
How it should look:
This is how its implemented:
<img class="has-border" src="https://andreramoncombucket.s3.amazonaws.com/static/assets/img/work/personal-website/pw_full.jpg" style="object-fit: cover;" alt="..." loading="lazy">
I had a similar issue when trying to implement it.
I use Chrome by default and it was not working. When I tested it in Firefox, it did work. That made me think it was a browser problem.
After digging in a bit more, I found out the "problem" for my case. It might be the same probably for many others.
It turns out Chrome is more impatient than Firefox when loading images tagged as lazy. That means it loads the images much earlier, so an image will not be loaded when it appears at the screen but earlier than that.
Firefox, on the other side, is loading the images almost when they are about to be shown at the screen.
The images I was testing were below the fold, but the page was not very long, so Chrome was loading the images anyway.
When I tried it in a much longer article, the images that were deep down the article did load lazily in Chrome as well.
Hope this helps!
I had a similar problem, and after some research, I found the solution:
Just need to add width and height to the IMG tag, this is because the browser needs to know the size of the element before applying lazy loading.
Your code:
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">
Your code after adding width and height:
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="200px" height="200px">
Another alternative is using inline style:
<img class="has-border" src="..." style="object-fit:cover; height:200px; width:200px;" alt="..." loading="lazy">
Take into consideration I just randomly set the dimensions of the IMG tag to 200px.
You can find more information on this web.dev article
hope it helps 👍
I have the worst reason it wasn't working - I forgot to add the width and height attributes (they were instead added as styles in my broken code)
optionally if you dont want to change your image size use this
Original code
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">
With working Lazy load with no size restrictions
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="auto" height="100%">
I have applied loading="lazy" to all of my images, included width="111px" height="111px" attributes for my <img> tags and even converted them into WebP format to reduce size, but my Firefox browser still keeps loading all images from the entire page. I don't touch or scroll after refresh.
The indicator Dev tools says that it is - lazy-img.
I use Nodejs, vue and tailwind.
What could be wrong?
It could be because of cache.
If you see here lazy-img in the Network tab that means everything is fine.
You can test on a private window if you want just to double check.
The image should be positioned as "relative" in style.
Uploaded image has EXIF Orientation: Rotate 270 CW, if I use <img src="path.jpg"/>, then browser shows the image correctly. But if I use <img src="data:image/jpeg;base64,..."/> it is displayed rotated, how can I fix this?
No JS solution, need to fix it with html, because this is used in email template
Changing to inline images is also problematic at the moment, would be perfect if I could keep it as base64 image and solve the orientation issue
Maybe something like :
<img src="data:image/jpeg;base64,..." style="transform: rotate(270deg);" />
And pass the EXIF Orientation as rotate value.
Documentation : https://www.w3schools.com/cssref/css3_pr_transform.asp
Problem:
On page load, for a button, SVG which is being called in CSS background appears. On some event, I apply a class and to it call another SVG in CSS background. However that new SVG does not appear. If in debugger, I try to toggle the background, it then starts appearing.
What am I missing to get this working in IE11?
In Below picture, we are using <button> tag. On some event, the background SVG is changed.
CSS Code
.buttonIcons{
.svgicon-fields-add{ background-image:url('../assets/themes/svg/arrow_active.svg');
width: 16px;
height: 16px;
}
On disabled state, below is the CSS
.buttonIcons.disabled{
.svgicon-fields-add{ background-image:url('../assets/themes/svg/arrow_disabled.svg');
width: 16px;
height: 16px;
}
So initially all buttons are disabled, but if you see the first button needs to show active svg image, but it is not appearing. I can see it in IE11 console, and if in console, I toggle the property, it starts appearing.
The code works fine in Chrome
Thanks in advance for all the suggestions.
SVG file code
<?xml version="1.0" encoding="utf-8"?>
<svg width="16" height="16" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<g>
<polygon fill="#00a6a0" points="7.6,1.6 6.7,2.4 12.3,8 6.7,13.6 7.6,14.4 14,8 "/>
<polygon fill="#00a6a0" points="2.6,1.6 1.7,2.4 7.3,8 1.7,13.6 2.6,14.4 9,8 "/>
</g>
</svg>
Based on the small number of views, this is an esoteric case, but I'm having the same problem. I've been on it for days. I also had a double problem where IE would not display the background on toggling the style in developer tools.
I thought it was initially a memory issue, where IE was allocating memory for the icon but not actually putting anything there.
So I applied the SVG as an xml-encoded string directly in the class itself. This solved one instance of an SVG background not appearing, but it didn't solve the problem mentioned here. Furthermore, this allowed me to see the toggle event you mentioned.
So I now believe that it is NOT a memory issue, but an issue with IE10/11's SVG rendering engine. The fact that this problem only happens with certain SVG's reinforces the idea that the IE rendering engine is crapping the bed with certain inputs. It also only happens when a CSS SVG background is being overridden by another class's SVG background.
I thus tried setting the object to display:none, then display:block in the hopes of forcing a re-render of the element. This didn't help. I destroyed the element then rebuilt it and appended it back where it was supposed to go. That didn't work.
To make things even more confusing, I was never able to replicate the problem locally. It would only ever manifest in certain environments, leading me to believe that it is a combination of the browser and some server settings. I have no idea what.
Regardless, the point is that IE is remarkably resilient it not re-rendering what it has rendered. And since the SVG engine is apparently separate from the DOM rendering engine, screwing around with the DOM will have no effect on what the SVG renderer has stored. You have to give it quantifiably different data to force the SVG engine to re-render.
The only solution I found was to have my two CSS classes then give IE different image data than what it found on page load.
.Class1 {
background-image: url("data:image/svg+xml,image-data...");
}
.Class2 {
background-image: url("data:image/svg+xml,image-data...");
}
These classes allow default page load states to be covered. Then when JS events change the appearance, instead of changing the class, assign an in-line CSS style with the XML-ified SVG image data with a slight difference. Anything will work. I used an extra space.
onclick="function(){
element.style.backgroundImage = "url(\"data:image/svg+xml,slightly-different-data...\")"
}
To reiterate, it is an SVG rendering problem that occurs on page load. You can force SVG to re-render the image by giving it slightly different data in-line. I would imagine that you could do the same thing with a third class that contains a reference to a slightly different SVG file from the initial one, but I didn't do this.
Make sure the SVG file has the width and height property.
And if there's a 'responsive' option in it, you should remove it.
The option resets the CSS width and height.
I'm relatively new to HTML and CSS so with a bit of luck there is an easy fix to my problem.
I have a few images for my site, 1 as a background image and 2 which are just sitting in the body. In safari everything displays flawlessly however in Chrome, Firefox and Opera only 1 of the images in the body displays.
I've tried searching for answers, the only suggestion that I can find is to disable ad-block which resulted in no-change.
I've also tried disabling the stylesheet but the problem still persists.
<div class="photocontainer" id="homepage"><h4 id="phototext">A Guide to Quality Web Development</h4></div>
<div class="Body">
<h2>We're here to <Span>help.</Span></h2>
<img id="plan" src="./images/plan.jpg" alt="plan">
<img id="flowchart" src="./images/flowchart.jpg" alt="flowchart"/>
The above code contains the 3 images. The second of which is the only one that works.
I should mention that the photocontainer div has a background-image specified by the stylesheet.
Option 1:
I suggest changing you src codes.
From src="./images/plan.jpg"
To src="plan.jpg"
Option 2:
Add width and height codes to your <img> tags.
Option 3:
Try removing the id from one of the <img> tags.
I hope one of these work. Try to mix them around. Like removing the id and adding the width and height too.
Found the problem!
The images themselves had trouble opening. Opened them in photoshop and then saved for web. Not it works.
I'm trying to have a SVG graphic inside an <img /> tag that would fit (without crop) inside the tag with preserved aspect ratio. I created the SVG in Inkscape. It worked as expected on all browsers except for Internet Explorer 9.
To make it work on IE 9 I had to add the viewBox="0 0 580 220" and preserveAspectRatio="xMidYMid meet" and remove the width="580" and height="220" SVG properties.
<svg viewBox="0 0 580 220" preserveAspectRatio="xMidYMid meet">...</svg>
This seemed to work everywhere, just until I tried it on Webkit, where the <img /> tag gets stretched vertically although the aspect ratio of the SVG is indeed preserved.
When I put back the width="580" and height="220" properties, it works on Webkit but on IE 9 the aspectr ratio is lost.
Is there a cross browser solution for this behavior?
Seems like I found the solution:
You need to keep the width and height properties in the SVG.
<svg
width="580"
height="220"
viewBox="0 0 580 220"
preserveAspectRatio="xMidYMid meet"
>...</svg>
And to make it work on IE 9 you need to specify at least one dimension of the <img /> tag.
<img src="your.svg" style="width: 100%" />
This seems to be working everywhere.
I solved it by setting the following CSS to the :
width: 100%;
max-width: (desiredwidth in px)
The solution in my case was using Peter Hudec's answer, but because of using width: 100%; on the <img /> tag, which broke the layout on every non-IE9 browser, I added a IE9-only CSS hack (width: 100%\9\0;). Hope this addition will help someone. :-)
Even using the preserveAspectRatio="xMidYMid meet" was not neccessary.
(I wanted to add only a comment, and not answer, but no reputations yet to do so :-)
Just thought that I would add how I stepped into a solution. I had trouble figuring out some of the issues at first.
Edit your SVG file to remove the hard-coded height and width attributes. (with simple text editor)
Apply width:100% css to your svg image to make IE display it like other browsers. (as big as it's container)
Use css on your image container for consistent results!
I made a page to describe it in more detail at http://ivantown.com/posts/svg-scaling-with-ie/
Just an additional suggestion: Using an attribute selector based on the .svg filename suffix might be useful in cases where you need this behavior on all your svg content, and don't have control over the markup.
For example
img[src$=".svg"] {
width:100%;
}