主页 / coding / 问题 / 79142289
Accepted
Luis A. Florit
Asked: 2024-10-31 01:56:50 +0800 CST

如何强制滚动条忽略图像？

  • 772

我有一个尺寸为 AxB 的 HTML 网页，它使用了一个尺寸为 2Ax2B 的透明图像。然后滚动条出现在 2Ax2B 处。我该如何让滚动条忽略该图像？

该图像无法设置为背景，因为它一直在变化并且必须放在顶部。

我尝试使用 body/html 标签中的 CSS 设置大小，但它们被忽略了。

编辑

这是我的页面的相关内容：

<!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>
html

1 个回答

  1. Best Answer

    如果没有最小可重现的示例，很难准确理解您想要什么。如果您希望图像适合填充<img>其容器的标签，则使用object-fit: cover，这会自动水平和垂直填充而不会拉伸。如果您的图像<img>大小和位置已经正确，并且您只想摆脱滚动，那么您可以overflow: hidden在图像容器中使用。

    编辑：

    正如@ Luis A. Florit (OP) 评论的那样，object-fit: none; object-position: 0 0解决了他的问题，第一个将图像置于其原始分辨率（不调整大小），后者将其放置在左上角

    • 2

相关问题