Início / coding / Perguntas / 79142289
Accepted
Luis A. Florit
Asked: 2024-10-31 01:56:50 +0800 CST

Como forçar as barras de rolagem a ignorar uma imagem?

  • 772

Tenho uma página HTML da web que é AxB em tamanho, e ela usa uma imagem transparente que é 2Ax2B. Então as barras de rolagem aparecem em 2Ax2B. Como posso dizer às barras de rolagem para ignorar a imagem?

A imagem não pode ser definida como plano de fundo, pois ela muda constantemente e precisa ficar no topo.

Tentei definir o tamanho usando CSS nas tags body/html, mas elas são ignoradas.

EDITAR

Este é o conteúdo relevante da minha página:

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

  1. Best Answer

    Sem um exemplo mínimo reproduzível é difícil entender exatamente o que você quer. Se você quer que a imagem se encaixe em uma <img>tag que preencha seu contêiner, então use object-fit: cover, isso preenche horizontalmente e verticalmente automaticamente sem esticar. Se seu <img>já estiver corretamente dimensionado e posicionado e você só quer se livrar da rolagem, então você pode usar overflow: hiddenno contêiner de imagem.

    Editar:

    Como comentou @Luis A. Florit (OP), object-fit: none; object-position: 0 0foi o que resolveu seu problema, o primeiro coloca a imagem em sua resolução original (sem redimensionamento) e o último a posiciona no canto superior esquerdo

    • 2

relate perguntas