CODEWITHSUNDEEP
htmlcssgoogle-chromewebwebkit
Eugene Garbuzov
Eugene Garbuzov

Reputation: 333

How to fix incorrect element size on browser scaling?

Consider we have a 72x100px PNG image which is called pic.png. Its left half is yellow and the right half is black.

Then we have a web page with an element <i class="picture"></i> with the following CSS:

.picture {
    background-image: url('pic.png');
    background-position: 0 36px;
    display: inline-block;
    height: 36px;
    width: 36px;
}

If I open this page in Chrome 50 or Opera 37 and set the scaling to 33%, 67% or 90%, I will see a 1px black stripe at the right part of the element. The screen resolution is 1920x1080.

How can we fix this issue so that the element is always yellow in any scale in any browser?

By now I know that if I set width to 35.5px, the black stripe will be seen only when the scale is 67%.

Upvotes: 1

Views: 652

Answers (1)

Mudassir
Mudassir

Reputation: 1156

Try adding this and see if it solves the problem...

display: inline-table;

Upvotes: 1

Related Questions