图像在浏览器之间改变大小

Question

我正在尝试建立一个网站，我在photoshop中制作临时图像，我在插图画家和chrome和firefox之间重新制作了这些图像，图像正在改变大小（在Firefox中很大，在Chrome中很小） ）。我已将图像导出为png，我在这些图像上使用宽度和最大宽度。

为什么会发生这种情况？

Answer 1

max-width不能小于width。使用max-width的最常用方法是这样的：

.selector {
    width: 1200px;
    max-width: 100%;
}

因此，width控制.selector的实际宽度，但max-width不会让.selector宽于100% document。实际上，你写max-width的方式，它覆盖了width。

如果您认真使用width和max-width，可以这样写：

<img style="width: 45%; max-width: 45%;" src="images/animation.png">

此外， SEO中不建议使用内联CSS。如果您对此非常热衷，请仔细考虑并为图像添加alt： - ）

祝你好运！