CSS Hero图片高度问题

Question

我使用以下代码在我的网站上显示类似可拉伸的响应式横幅图像，我已经从另一个可以正常工作的网站（https://www.svenskakyrkan.se/onsala/adventsmusik）获得了代码。

.hero {
  width: 90%;
  max-width: 1350px;
  margin: 0 auto;
  position: relative;
  padding-top: 3rem;
}

.hero .hero-image-container {
  position: relative;
  width: 100%;
}

.hero .hero-image {
  width: 100%;
  height: auto;
  position: relative;
  min-height: 240px;
  max-height: 800px;
  background: center center #fff;
  background-size: cover;
  overflow: hidden;
  margin: 0;
}

.hero .hero-image:after {
  padding-bottom: 56.25%;
}

<div class="hero">
  <div class="hero-image-container">

    <figure class="hero-image" style="background-image: url('/images/banner.jpg'); max-height: 504px;"></figure>
  </div>
</div>

问题在于图像只有240像素高，因此自动高度无法正常工作。

Answer 1

您需要提供伪元素内容并使其为display:block：

.hero {
  width: 90%;
  max-width: 1350px;
  margin: 0 auto;
  position: relative;
  padding-top: 3rem;
}

.hero .hero-image-container {
  position: relative;
  width: 100%;
}

.hero .hero-image {
  width: 100%;
  height: auto;
  position: relative;
  min-height: 240px;
  max-height: 800px;
  background: center center #fff;
  background-size: cover;
  overflow: hidden;
  margin: 0;
}

.hero .hero-image:after {
  content:'';
  display:block;
  padding-bottom: 56.25%;
}

<div class="hero">
  <div class="hero-image-container">

    <figure class="hero-image" style="background-image: url('https://www.fillmurray.com/1000/500'); max-height: 504px;"></figure>
  </div>
</div>