css - 以移动方式运行时如何修复错误 css width x height

Question

我有一张图片:

<img class="" width="78px" height="78px" border="0" alt="" src="test.png" smartload="7" style="opacity: 1;">

和CSS:

img {
    border: 0;
    max-width: 100%;
}

当作为 PC (firefox) 运行时

移动端运行时高度错误:

Answer 1

如果您希望事物按比例缩放，请不要设置宽度和高度...只设置其中之一。浏览器会根据高宽比自动为您缩放另一个维度。

我会在标签中删除宽度/高度，并在 CSS 中只设置宽度。

width: 78px;
max-width: 100%;

您通常不需要 max-width: 100%。