Question

我的图像大小约为400像素×300像素。

我已经使用css调整了大小：

img {
    display: block;
    max-width: 50px;
    max-height: 50px;
}

但是当它显示时它会不断闪烁。

这只发生在Firefox中。 Chrome，IE和Safari都显示正常。这是为什么？

Answer 1

首先，调整图像大小是一个坏主意。当您需要50x50图像时，为什么要有400x300图像。你可以通过让他下载一个30Kb的文件来浪费用户乐队，而他可以使用4Kb。

但是，您想要的是缩放图像。 CSS3有一个名为ri的新属性。

试试这个

img.ri { max-width: 90%; }

您可以使用媒体查询。

@media screen and (orientation: portrait) {
    img.ri { max-width: 90% }
}

@media screen and (orientation: landscape) {
    img.ri { max-height: 90% }
}

现在您不想失去纵横比，请尝试使用css属性

resize: none|both|horizontal|vertical|initial|inherit; /* any one of the options IE not supported*/

如果您想要响应性地缩放图像，请查看此内容：http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design。

已调整大小的图像在firefox上闪烁

1 个答案: