我使用以下代码在我的网站上显示类似可拉伸的响应式横幅图像,我已经从另一个可以正常工作的网站(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像素高,因此自动高度无法正常工作。
答案 0 :(得分: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>