CSS image size not render correctly

Question

First load

I set the width to 97px & height to 58px. But when it first load (the elements created by jQuery), what I see in Chrome was 59.5px width.

After uncheck the `width` checkbox, then re-check it

Now it display the correct size.

Is that the browser issue? How can I fix this?

Google Chrome 74.0.3729.169 (Official Build) (64-bit)
macOS 10.14.5

score 0 · Answer 1 · edited Jun 12 '19 at 11:38

0

It is due to image size. If the size of the image is already how much you want then don't change the image size. When you give the same size browser tries to override and then problem occurs(which is wrong image size).

edited Jun 12 '19 at 11:38

Persijn

14,624
3
43
72

answered Jun 12 '19 at 10:29

sidrao2006

1,228
2
10
32

Welcome to Stackoverflow! If you want to give a single user some feedback, post it as a comment. Answers are for all users on the site. – Persijn Jun 12 '19 at 11:38

score 0 · Answer 2 · answered Jun 12 '19 at 10:38

0

Try giving important in CSS like and use any parent div that is static or whose class name you know

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

answered Jun 12 '19 at 10:38

Rutuja Kurle

75
3

score 0 · Answer 3 · answered Jul 02 '19 at 04:29

0

I found a hack to solve. Force DOM redraw/refresh on Chrome/Mac

After the content loaded

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

answered Jul 02 '19 at 04:29

Js Lim

3,625
6
42
80

score 0 · Answer 4 · answered Nov 24 '20 at 18:15

0

I solved this by preloading the image. I placed the following within the tag of my page:

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

answered Nov 24 '20 at 18:15

Greg Ross

3,479
2
27
26

CSS image size not render correctly

First load

After uncheck the width checkbox, then re-check it

4 Answers4

After uncheck the `width` checkbox, then re-check it