I'm currently working on a website. I noticed some elements are beeing cut off, if viewed in Firefox. I attached an Image, showing the problem.
The image below is a jsfiddle Screenshot from Firefox.
The code reproducing it is located here: JSFIDDLE
It's just an image, with an percantage value set with CSS.
.image-percent {
width: 30%;
}
The weird thing is, sometimes I am able to reproduce the bug and sometimes it simply vanishes after adding random HTML-Elements or other CSS-Properties.
Anyone already experiences this behaviour or know a workaround, forcing Firefox to resize the image the right way?
Actually found the solution in this thread Firefox blurs an image when scaled through external CSS or inline style.
Firefox implemented non-standart css property image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Playing with different values this solution gives more or less appropriate result:
image-rendering:optimizeQuality;
http://jsfiddle.net/jGKkB/
You need to add the max-width property. this should fix it.
.image-percent {
width: 30%;
max-width: 100%;
}
Just for testing. try this:
.image-percent {
max-width: 100%;
height: auto;
width: auto;
}
Hope that's it.
Basically, your image resolution is very high and you are trying to display it in 30% width.
So your image's pixels is not showing properly. Whenever you show the large image to small or small image to large this will be happened.
You can create an another image with desired width.
Related
Hi i am having some troubles while trying to "fit" an image inside a css grid container (The problem only happends while using Safari, Firefox and Chrome is ok.) Problem is, the img height while using Safari takes all the available space and this makes the image looks deformed (Below is the link to the screenshot I took)
These are the properties I am applying to the image:
img {
flex-basis: calc(66.67% - 3.6rem);
width: 66.67%;
margin: 0 auto;
}
Link to screenshot
You may try re-defining the height of the image as the same problem occurred with me and by re-defining, it worked for me on safari. And also instead of giving the width and height in percentage, give it in pixels as it will be more convenient.
I'm working on creating a fallback image inside of my class that creates responsive images, but I am stuck with trying to fix a problem for IE. Since I cannot use things like <source>, object-fit and srcset I am up against a challenge. The image is placed underneath the content so it will size to the height of the div content. The image should cover the whole background of the div that contains the content, but the problem is that the width presses the image to this compact size that looks awful:
I will provide you with a jsfiddle: https://jsfiddle.net/6Lxwesvf/7/ .
I made a copy of one of the wrappers it does exactly what it does inside of the IE. So I hope someone knows something about making the image not look all pressed by the width.
Change this
height: 100%;
to this:
min-height: 100%;
min-width: 100%;
margin: auto;
Working pen: https://codepen.io/sidhanshu28/pen/ERNwxz
We're having a problem when an image (logo) is resized in WebKit, it is jagged for a couple of seconds. We've tried resizing it both by changing width in CSS and using scale transformation. Is there any way to fix this?
http://codepen.io/Znarkus/pen/xbxKLK
Example HTML:
<div>
<img src="http://i.imgur.com/LoN4Mnz.png">
</div>
CSS:
div {
width: 300px;
height: 100px;
background: #ddd;
}
img {
max-width: 100%;
}
div:hover img {
width: 200px;
}
It seems to be a problem with the antialiasing of the images which has a short delay. My searches did not yield any good answers on how to solve this, so I've come up with two possible solutions.
Solution 1
Keep two versions of the image pre-rendered, then switch between the different sizes.
Pros: Perfect rendering
Cons: Takes more memory
Solution 2
User the image-rendering CSS property to disable antialiasing. By adding image-rendering: [browser specific see codepen fork]; to the div, you can see that the rendering of the image isn't as good as without antialiasing.
Pros: All CSS, no extra memory consumption
Cons: Lesser image quality
http://codepen.io/anon/pen/XJWrvJ
EDIT: Solution 3
On second though, there might be a different solution. Images aren't particulary great for rendering text, but since it's a logo I'm guessing you have some kind of special twist on the text or styling. If you can export the logo as svg and render it in a canvas you might be able to get around these problems.
I am doing my first website and decided to use Bootstrap3. I've started to work over section with four 'feature' columns with one image per one of them. I am including link to my developer version of it:
http://tymekpudlik.github.io/kajtek/
In Chrome/Safari there is a problem that four image-icons (section where is a brain image) have much bigger height that they should have when we launch the site for the first time. When I open Chrome DevTools and click on css height property for image and enter one more time same, percentage value (90%), images are changing to correct size. Issue persists only for Chrome/Safari.
There is nothing special in css properties for image:
img {
display: block;
margin-left: auto;
margin-right: auto;
height: 90%;
width: 90%;
}
I'll really appreciate any help. Thanks!
Change stye of the parent element of that img (i.e div with class "feature text-center") as
height:auto; instead of height:100%;
This trick may help you..
Have a look a this url:
http://www.preen.me/product/1113142/
The product box on the left has the class product_pic, and contains an img tag with these CSS attributes:
max-width: 100%;
max-height: 100%
This is to ensure that the image fits proportionally in the box.
It works perfectly in Chrome, Firefox and all other proper modern browsers on PC:
It does not work in mobile Safari. Specifically, if you try to look at this page on an iPad in landscape mode the image simply disappears:
I think this is a rendering issue in mobile Safari but I'm at a loss as to how to solve it. Removing either one of the max-width\max-life properties brings back the image, but obviously without the required functionality. How can I go around this?
As I remember it, this is fixed by setting html/body tag to width/height 100%.
html,body{
width: 100%;
height: 100%;
}
And don't forget to set all divs up to the div where it should have effecto to width/height 100%.
Also you can try to set the html,body to position: relative. I'm no longer sure about this one.
A few suggestions. Other than playing with "overflow:hidden", you can try adding default values for width and height or simply play around by using "width:auto" or "height:auto" or both. You may also want to set "float:left".
Hope this solves your problem (at least partially).
happy coding :)