Question

我正在处理的网站上的标题图片在缩小尺寸（较小）时会响应屏幕尺寸的变化，但是在进入更大的屏幕尺寸时不会响应。

如果您使用较小的屏幕尺寸，刷新，然后展开窗口，您将看到问题所在。图像的底部被切断，填充该区域的黑色空间。

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，请尝试使用类＆＃34; img-responsive＆＃34;为徽标并使用每种屏幕尺寸的媒体查询调整徽标宽度

Answer 2

仅在移动设备上查看网站时问题仍然存在。我想出的一个不太理想的解决方案是在任何小于笔记本电脑的屏幕尺寸上将图像的高度设置为屏幕的宽度。

CSS：

@media only screen and (max-device-width: 1024px) and (orientation: landscape) {
  .intro-bg {
    height: 100vw !important;
  }
}

如何使标题图像响应屏幕大小的变化？

2 个答案: