在Firefox中调整大小时图像被切断了

Question

我目前正在网站上工作。如果在Firefox中查看，我注意到有些元素被切断了。我附上了一张图片，显示了问题。

下图是来自Firefox的jsfiddle截图。

复制它的代码位于：JSFIDDLE

它只是一个图像，使用CSS设置了percantage值。

.image-percent {
    width: 30%;
}

奇怪的是，有时我能够重现错误，有时它会在添加随机HTML元素或其他CSS属性后消失。

任何人都已经遇到此行为或知道解决方法，迫使Firefox以正确的方式调整图片大小？

Answer 1

实际上在这个帖子Firefox blurs an image when scaled through external CSS or inline style.

中找到了解决方案

Firefox实现了非标准css属性image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

使用不同的值，此解决方案会给出或多或少的适当结果：

image-rendering:optimizeQuality;

http://jsfiddle.net/jGKkB/

Answer 2

您需要添加max-width属性。这应该解决它。

.image-percent {
    width: 30%;
    max-width: 100%;
}

仅供测试。试试这个：

.image-percent {
    max-width: 100%;
    height: auto;
    width: auto;
}

希望就是这样。

Answer 3

基本上，您的图像分辨率非常高，并且您尝试以30％的宽度显示它。 因此，您的图像像素显示不正确。无论何时将大图像显示为小图像或大图像都会发生这种情况。

您可以创建具有所需宽度的另一个图像。