CSS 图像大小无法正确呈现答案

【问题标题】：CSS image size not render correctlyCSS 图像大小无法正确呈现
【发布时间】：2020-11-25 02:15:48
【问题描述】：

首次加载

我将宽度设置为 97 像素，高度设置为 58 像素。但是当它第一次加载（jQuery创建的元素）时，我在Chrome中看到的是59.5px的宽度。

现在它显示正确的大小。

是浏览器的问题吗？我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

尝试在 CSS 中给出重要信息喜欢并使用任何静态的父 div 或您知道其类名的父 div

div > img{
  width: 97px !important;
}

【讨论】：

【解决方案2】：

这是由于图像大小。如果图像的大小已经是您想要的大小，则不要更改图像大小。当您给相同尺寸的浏览器尝试覆盖时，就会出现问题（这是错误的图像尺寸）。

【讨论】：

【解决方案3】：

我找到了一个破解方法。 Force DOM redraw/refresh on Chrome/Mac

内容加载后

setTimeout(function() {
    $('.parent img').hide().show(0);
}, 500);

【讨论】：

【解决方案4】：

我通过预加载图像解决了这个问题。我在页面的标签中放置了以下内容：

<link rel="preload" as="image" href="path/to/image.png" as="image">

【讨论】：