如何使图像不透明且文本不在其旁边滚动？

Question

这是我第一次用 HTML 语言写作，如果我不尊重语言格式标准，请原谅我。

function show_or_hide_Block(show_hide){

    if (document.getElementById(show_hide).className == 'hide') {

        document.getElementById(show_hide).className = "show";} 

  else{document.getElementById(show_hide).className = "hide";}

}

  function banner_adapt () {

    var b = document.getElementById("banner");

    b.style.maxWidth="100%";

    var p = document.getElementById("body_text");

      if (b.width >= 700){

        //alert("actual: " + b.width + " too large, setting to 700px.")

        b.style.maxWidth="700px";

      } else if (b.width < 700){

        //alert("Enought small to set 100%.")

        b.style.maxWidth="100%";}

      //alert("setting lar to:" + (Math.round(b.width/1600*449)+10) + "px");

      p.style.marginTop=(Math.round(b.width/1600*449)+10)+ "px";

      

  }

    $(window).load(function(){

      banner_adapt();

    });

    $(document).ready(function(){

      $(window).resize(function(){

      banner_adapt();

    });

    });

如您所见，我将图像放在 h1 标签中，并在 style.css 中进行了修复。然后我想让图像适应查看的窗口，所以我制作了一个可以适应图像和文本边距顶部的 JS。问题是我的图像是透明的，它没有填充窗口的宽度，因此文本可以在图像后面和旁边滚动。我不希望文本在后面滚动。如何才能做到这一点？预先感谢