MaterializeCSS 컨베이어에 최소 높이 제공

Question

내 웹 사이트에 MaterializeCSS 컨베이어를 사용하고 싶습니다. 페이지의 전체 너비에 걸쳐 있어야하지만 높이가 400px 미만이되지 않아야합니다.이 경우 창 너비가 축소 될 때 회전식 높이를 400px로 유지하기 위해 양면을 자르고 싶습니다.

이 내가 무엇을 시도했다입니다 :

는

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

그러나이 솔루션은 회전 목마 - 고정 항목 요소의 크기를 수정하는 것 같다. 이미지는 동일한 비율을 유지하고 고정 요소 뒤에서 축소됩니다.

이 문제의 해결책이 있습니까? 사진의 가로 세로 비율을 유지하면서 전체 요소를 커버 이미지를 표시 할 수 background-size : cover (MDN link)와 사전 :

Answer 1

사용 background-image에서 덕분에, 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>