はMaterializeCSSカルーセルに最低の高さを与えます

Question

私は自分のウェブサイトにMaterializeCSSカルーセルを使用したいと思います。ページの全幅にわたるが、高さが400ピクセル未満にならないようにする必要があります。この場合、ウィンドウの幅が縮小したときに回転台の高さを400ピクセルに保つために両面を切り抜きたいと思います。

これは私が試したものです：

.carousel { 
 
     min-height: 400px; 
 
    }

<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" href="#one!"><img class="img-responsive" src="http://via.placeholder.com/1000x340/f44336/b71c1c"></a> 
 
     <a class="carousel-item" href="#two!"><img src="http://via.placeholder.com/1000x340/4caf50/1b5e20"></a> 
 
     <a class="carousel-item" href="#three!"><img src="http://via.placeholder.com/1000x340/ffeb3b/f57f17"></a> 
 
     <a class="carousel-item" href="#four!"><img src="http://via.placeholder.com/1000x340/2196f3/0d47a1"></a> 
 
    </div>

をしかし、このソリューションは、カルーセル固定item要素のサイズを固定しているようです。 イメージは同じ比率を維持し、固定要素の背後で縮小します。

この問題の解決方法がありますか？予め background-size : coverおかげ:)と

Answer 1

使用background-image（MDN link）はbackground-position : centerを使用すると、要素内の画像をセンタリングすることができ、画像の縦横比を失うことなく、素子全体をカバーする画像を表示します。作業JSFiddleの

リンク：https://jsfiddle.net/7kvtyahj/2/

CSS

.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'); 
} 

HTML

<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>