Html 为ECSS转盘提供最小高度

我想为我的网站使用物化ECSS旋转木马。它需要跨越页面的整个宽度，但高度不能低于400px，在这种情况下，我希望在窗口宽度缩小时裁剪两侧，以使转盘高度保持在400px

这就是我尝试过的：

.carousel{
最小高度：400px；
}

未来的
高性能铝合金制造厂

使用

背景图像

和

背景大小：封面

（）显示覆盖整个元素的图像，而不丢失图片的纵横比，

背景位置：中心

允许您将图片居中放置在元素内

工作JSFIDLE的链接：

CSS

HTML

未来的
高性能铝合金制造厂
使用
background image
和
background size:cover
（）可显示覆盖整个元素的图像，而不会丢失图片的纵横比，
background position:center
允许您将图片居中放置在元素内部

工作JSFIDLE的链接：

CSS

HTML


未来的
高性能铝合金制造厂
嗨，我做了一个JSFIDLE，这能解决你的问题吗？这正是我需要的！非常感谢：）不客气，我发布了这个问题的答案嗨，我做了一个JSFIDLE，这能解决你的问题吗？这正是我需要的！非常感谢：）不客气，我贴出了这个问题的答案
.carousel {
  min-height: 400px;
}

.carousel-item
{
  background-size : cover;
  background-position: center;
}

.c1
{
  background-image : url(' http://via.placeholder.com/1000x340/2196f3/0d47a1');
}

.c2
{
  background-image : url(' http://via.placeholder.com/1000x340/4caf50/1b5e20');
}

.c3
{
  background-image : url(' http://via.placeholder.com/1000x340/2196f3/0d47a1');
}

 .c4
{
  background-image : url(' http://via.placeholder.com/1000x340/4caf50/1b5e20');
}

<div class="carousel carousel-slider center" data-indicators="true">
  <div class="carousel-fixed-item center">
    <h1 class="header futural center white-text animated fadeInUp">Futural</h1>
    <div class="row center">
      <h5 class="header col s12 light white-text animated fadeInUp delay-animation">Fabricant de menuiserie aluminium à haute performance énergétique</h5>
    </div>
    <div class="row center">
      <a href="{{ site.baseurl }}/about.html" class="btn waves-effect white grey-text darken-text-2 animated fadeInUp delay-button">Nous contacter</a>
    </div>
  </div>

  <a class="carousel-item c1" href="#one!"></a> <!--Notice that I removed the <img> tags and added the classes c1, c2, c3 and c4 in the <a> elements -->
  <a class="carousel-item c2" href="#two!"></a>
  <a class="carousel-item c3" href="#three!"></a>
  <a class="carousel-item c4" href="#four!"></a>
</div>