html - 在 Firefox 中调整大小时图像被截断

Question

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

下图是 Firefox 的 jsfiddle 截图。

重现它的代码位于此处：JSFIDDLE

它只是一个图像，具有使用 CSS 设置的百分比值。

.image-percent {
    width: 30%;
}

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

任何人都已经经历过这种行为或知道一种解决方法，迫使 Firefox 以正确的方式调整图像大小？

Answer 1

实际上在这个线程中找到了解决方案Firefox 在通过外部 CSS 或内联样式缩放时会模糊图像。

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% 的宽度显示它。所以你的图像的像素没有正确显示。每当您将大图像显示为小图像或将小图像显示为大图像时，都会发生这种情况。

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