CODEWITHSUNDEEP
htmlcssimagefirefox
Kilian Stinson
Kilian Stinson

Reputation: 2394

Image is being cut off on resizing in Firefox

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.

cut off image

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?

Upvotes: 7

Views: 6128

Answers (3)

claustrofob
claustrofob

Reputation: 4984

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/

Upvotes: 16

skparwal
skparwal

Reputation: 1084

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.

Upvotes: 0

Kees Sonnema
Kees Sonnema

Reputation: 5784

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.

Upvotes: 0

Related Questions