CSS英雄图片高度问题

Question

我使用以下代码在我的网站上显示像一个 flex 响应横幅图像，我从另一个网站 ( 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>