I made an image viewer app, that just sends an image to a TV using a raspberry, displaying it on the connected screen via HDMI. The displaying software is Chrome, but I have a tiny problem:
There is a very small area of 4px I have to crop the bottom of the image in order to not see a scroll bar.
Example: Screen Res is 1024 x 768
- using a 1024 x 768 pic in fullscreen mode creates a vertial scollbar
- decreasing the y pixels by 4 (1024 x 764) makes the scrollbar disappear, but shows me a white border under my image in Chrome for Linux fullscreen mode.
I have no fancy css or html code whatsoever:
let content = document.getElementById("content");
let ImageDiv = document.createElement("IMG");
ImageDiv.src = pic.file
content.appendChild(ImageDiv);
with only very little of css:
body {
margin: 0;
}
what is the best way to get rid of the border and the scrollbar?
Edit:
https://jsfiddle.net/jLv74co6/1/
Minimal example. not really sure if it helps, as the problem could be related to the chrome linux version.
CodePudding user response:
::-webkit-scrollbar {
width: 0;
height: 0;
}
body {
scrollbar-width: none;
}
img {
display: block;
}
The first two blocks gets rid of the scrollbar on most browsers (all modern ones) and the display block gets rid of the bottom white border for the image