Question

我正在寻找一种更好的解决方案来创建全屏，半响应的背景图像，而不使用background-image / background-size CSS属性。这是一个很长的故事，但这是要求。

更具体地说，我正在寻找一种解决方案，无论屏幕尺寸如何，都能在容器内自动居中（纵向和横向），纯CSS解决方案优于jQuery / javascript解决方案。

下面的HTML / CSS完成了第一部分，但使用＆＃34; max-height＆＃34;和＆＃34;溢出：隐藏＆＃34;属性，它有点不稳定，它非常依赖于图像/屏幕尺寸，并且在图像选择方面不会留下很大的灵活性。

＆＃13;

#banner.subpageBanner {
  height: 100vh;
  max-height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

#banner.subpageBanner>.bgContainer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

#banner.subpageBanner>.bgContainer>img.subpageBG {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 100%;
  overflow: hidden;
}

＆＃13;

<section id="banner" class="subpageBanner">
  <!-- Banner BG Image Container -->
  <div class="bgContainer">
    <img src="https://placehold.it/500x300" class="subpageBG" alt="">
  </div>
  <!-- Banner Heading Content -->
  <div class="inner">
    <header class="major">
      <h1>A Big, Bold Heading</h1>
    </header>
  </div>
</section>

＆＃13;

半响应背景图像，不使用background-image / background-size属性

0 个答案: