在 Firefox 中调整大小时图像被截断答案

【问题标题】：Image is being cut off on resizing in Firefox在 Firefox 中调整大小时图像被截断
【发布时间】：2013-06-17 00:48:54
【问题描述】：

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

下图是 Firefox 的 jsfiddle 截图。

复制它的代码在这里：JSFIDDLE

这只是一张图片，用 CSS 设置了百分比值。

.image-percent {
    width: 30%;
}

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

是否有人已经遇到过这种行为或知道解决方法，迫使 Firefox 以正确的方式调整图像大小？

【问题讨论】：

你的图片在 div 里面吗？如果是这样的话。那个 div 有多宽？
不，正如小提琴中所见，它只是<img>。这就是为什么我不知道如何解决这个问题。
这可能与stackoverflow.com/questions/5918595/…有关
这不是 CSS 问题。这是调整图像大小后的抗锯齿。当调整大小的百分比生成十进制像素时，这种情况会发生在某些大小中。毕竟浏览器不处理十进制值，因为最小屏幕单位是 1 像素。
稍微旋转图像似乎可以解决抗锯齿问题。看到这个小提琴：jsfiddle.net/cfpqK/2

【解决方案1】：

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

image-rendering:optimizeQuality;

【讨论】：

【解决方案2】：

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

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

仅用于测试。试试这个：

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

希望就是这样。

【讨论】：

【解决方案3】：

基本上，您的图像分辨率非常高，并且您试图以 30% 的宽度显示它。所以你的图像的像素没有正确显示。每当您将大图像显示为小图像或将小图像显示为大时，都会发生这种情况。

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

【讨论】：