CSS图片大小无法正确呈现

Question

首次加载

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

取消选中width复选框后，然后重新选中

现在它显示正确的大小。

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

• Google Chrome 74.0.3729.169（正式版本）（64位）
• macOS 10.14.5

Answer 1

这是由于图像尺寸。如果图像尺寸已经达到所需大小，则不要更改图像尺寸。当您提供相同的大小时，浏览器尝试覆盖，然后出现问题（这是错误的图像大小）。

Answer 2

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

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

Answer 3

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

内容加载后

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

Answer 4

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

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