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

我正在处理的网站上的标题图片在尺寸缩小（较小）时会响应屏幕尺寸的变化，但在更大屏幕尺寸时无法响应。如何使标题图片响应屏幕尺寸的变化？

如果你去到一个较小的屏幕尺寸，刷新，然后展开窗口，你会看到这个问题。图像的底部被填满该区域的黑色空间切断。

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; }

来源

2017-03-10 S. Miller

你知道的大小单位VW和VH？例如100vw和100vh？在我看来，您的背景被脚本调整大小，在调整大小时会导致难看的效果（您会看到黑色背景在图像中闪烁）。 – Psi

@Psi有一个carouFredSel脚本正在运行，我认为它正在影响这个大小。你有没有用过这个？ –

不，还没有听说过 – Psi

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

CSS：

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

来源

2017-03-10 20:13:20

由于您使用的引导，尽量使用类 “IMG响应” 为标志和使用媒体查询调整标志宽度对于每种屏幕尺寸

来源

2017-03-10 19:43:39

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

回答

相关问题