I have a web HTML page that is AxB in size, and it uses a transparent image that is 2Ax2B. Then the scrollbars appear at 2Ax2B. How can I tell the scrollbars to ignore the image?
The image cannot be set as background since it keeps changing and it has to go on top.
I tried setting the size using CSS in the body/html tags, but they are ignored.
EDIT
This is the relevant content of my page:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#lasttime { position: absolute; z-index: 1000; left: 0px; top: 20px; font-size: 1.5em; font-weight: bold; }
#basemap { position: absolute; top: 0px; left: 0px; margin: 0; padding: 0; pointer-events: none; }
#radardiv { position: absolute; top: 0px; left: 0px; margin: 0; padding: 0; z-index: 1000; overflow: hidden; }
#radar { top: 0px; left: 0px; margin: 0; padding: 0; pointer-events: none; }
html, body { margin: 0; max-width: 840px; height: 720px; zoom: .885; }
</style>
</head>
<body>
<div id="radardiv">
<img id="radar" src="https://luis.impa.br/meteor/radarimgs/radar001.png"></img>
</div>
<img src="https://luis.impa.br/meteor/radarimgs/basemap.jpg"></img>
</body>
</html>
Without a minimal reproducible example is hard to understand exactly what you want. If you want the image to fit an <img> tag that fills its container then use object-fit: cover, this automatically fills horizontally and vertically without stretching. If your <img> is already correctly sized and placed and you just want to get rid of scrolling then you can use overflow: hidden in the image container.
As @Luis A. Florit (OP) commented, object-fit: none; object-position: 0 0 is what solved his problem, the first places the image at its original resolution (without resizing) and the latter positions it at the left top corner