Javascript 在“关于”部分中通过滚动和调整大小来使用英雄图像

我正在建立我的公文包网站，我想在《关于我们》的下一节中使用英雄部分的图像，通过移动和调整图像大小，我猜我已经确定了图像必须滚动到的700px高度。但问题是它无法调整屏幕大小。是否有一种方法可以移动它，使其始终适合滚动的“关于”部分？下面是显示问题的代码片段和gif

<!--HTMl-->
<section class="hero" id="hero">
    <div id="hero-img" class="hero-img" ><img  src="main.png"></div>   
</section>

/*CSS*/
.hero .hero-img{
    margin-left: auto;
    position: absolute;
    right: 0;
    opacity: 1;
    bottom: 0;
    max-height: auto;
    max-width: 100%;  
}
.hero .hero-img img{
    max-height: 100%;
    max-width: 100%;
    min-width: 160px;
    min-height: 320px;  
}

//JavaScript//
$(window).bind('scroll',function(e){
parallaxScroll();
});

function parallaxScroll(){
    var scr = $(window).scrollTop();
   var scrolled =document.getElementsByName('hero-img').length - $(window).scrollTop();  
   if(scr<690){
       $('.hero-img').css('top',(0-(scrolled*1.1))+'px');
       $('.hero-img').css('right',(0-(scrolled*.3))+'px');
    }
    else
    {
        $('.hero-img').css('top',('top'-(scrolled*1.1))+'px');
        $('.hero-img').css('right',('right'-(scrolled*.3))+'px');
    }
   
}

/*CSS*/
.英雄.英雄img{
左边距：自动；
位置：绝对位置；
右：0；
不透明度：1；
底部：0；
最大高度：自动；
最大宽度：100%；
}
.英雄.英雄img img{
最大高度：100%；
最大宽度：100%；
最小宽度：160px；
最小高度：320px；
}
//JavaScript//
$（窗口）.bind（'scroll'，函数（e）{
视差克罗尔（）；
});
函数视差croll（）{
var scr=$（window.scrollTop（）；
var scrolled=document.getElementsByName（'hero-img'）。长度-$（window.scrollTop（）；
如果（scr代码做什么：

获取ID为
ID=“skills”
的元素的位置，并从该值中减去图片所在的DIV元素的高度，并将该值设置为滚动的最大值

您已经手动设置了
690
。现在的变化是，如果自动收听，将首先出现
id=“skills”
或
690

我希望我能帮上忙


$（窗口）.bind（'scroll'，函数（e）{
视差克罗尔（）；
});
函数视差croll（）{
var scr=$（window.scrollTop（）；
var nel=$（“#技能”）.offset（）.top-$（“#英雄img”）.height（）；
var scrolled=$（'#hero img'）.length-$（window.scrollTop（）；
如果（scr

.hero.hero img{
左边距：自动；
位置：绝对位置；
右：0；
不透明度：1；
/*底部：0*/
顶部：0px；
最大高度：自动；
最大宽度：100%；
}
.英雄.英雄img img{
最大高度：100%；
最大宽度：100%；
最小宽度：160px；
最小高度：320px；
}

关于




































技能































































































































<
Thank var nel=$（“#skills”）.offset（）.top-$（“#hero img”）.height（）；成功了。我很高兴我提供了帮助：）谢谢您将此答案标记为已接受答案。您可以在此帖子上添加正面评价。