我使用以下代码在我的网站上显示像一个 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 像素高,因此高度自动不起作用。
最佳答案
需要给伪元素内容,让它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>
关于CSS英雄图片高度问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53500221/