javascript - 如何使标题图像响应屏幕尺寸的变化？

Question

我正在处理的网站上的标题图像在尺寸减小(较小)时响应屏幕尺寸的变化，但是在屏幕尺寸变大时不响应。

链接:已删除

如果转到较小的屏幕尺寸，刷新，然后展开窗口，就会看到问题。图像底部被黑色空间填充区域 chop 。

HTML:

<div class="intro">
    <div class="intro-inner">
        <div class="intro-bg">
            <div class="intro-bg-item"> 
                <div class="intro-bg-item-image" style="background-image: url(css/images/pb/home-banner.jpg)"></div><!-- /.intro-bg-item-image -->
            </div><!-- /.intro-bg-item -->
            
        </div><!-- /.intro-bg -->
    </div><!-- /.intro-inner -->
</div><!-- /.intro -->

CSS:

.intro { position: relative; text-align: center; color: #fff; background-color: #000; max-height: 100vh; overflow: hidden;}
.intro-inner { position: absolute; bottom: 0; top: 0; left: 0; right: 0; }
.intro:after { content: ''; display: block; padding-top: 45%; }
.intro:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 40%); z-index: 3; }

.intro-bg { position: fixed !important; height: 100% !important; }

Answer 1

由于您使用的是 Bootstrap ，请尝试使用“img-responsive”类作为 Logo 并使用媒体查询针对每个屏幕尺寸调整 Logo 宽度