구체화 카드가 같지 않은 높이에 있음

Question

카드에 동일한 높이를 얻으려고 코덱을 만들었지 만 할 수 없습니다.

이미지의 크기가 다르며 responsive-img 태그를 추가했습니다.

https://codepen.io/jgacuca567/pen/qXwXEz

<main class="container-fluid"> 
    <section class="row"> 
     <div class="col s12 m4 l4"> 
     <div class="card"> 
     <div class="card-image"> 
      <img src="https://unsplash.it/4579/3271?image=1084" class="responsive-img"> 
      <span class="card-title">Card Title</span> 
     </div> 
     <div class="card-content"> 
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> 
     </div> 
     <div class="card-action"> 
      <a href="#">This is a link</a> 
     </div> 
     </div> 
    </div> 
    <div class="col s12 m4 l4"> 
     <div class="card"> 
     <div class="card-image"> 
      <img src="https://unsplash.it/5472/3648?image=1083" class="responsive-img"> 
      <span class="card-title">Card Title</span> 
     </div> 
     <div class="card-content"> 
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> 
     </div> 
     <div class="card-action"> 
      <a href="#">This is a link</a> 
     </div> 
     </div> 
    </div> 
    <div class="col s12 m4 l4"> 
     <div class="card"> 
     <div class="card-image"> 
      <img src="https://unsplash.it/5416/3611?image=1082" class="responsive-img"> 
      <span class="card-title">Card Title</span> 
     </div> 
     <div class="card-content"> 
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> 
     </div> 
     <div class="card-action"> 
      <a href="#">This is a link</a> 
     </div> 
     </div> 
    </div> 
    </section> 
</main> 

Answer 1

기본 구체화는

MaterializeCSS가 카드 (소형, 중형, 대형)에 대한 세 가지 기본 크기를 제공합니다 크기. 다음은 다음과 같이 추가 할 수 있습니다

<div class="card small"> 
    <!-- Card Content --> 
</div> 

(제목 "카드 크기"... 당신이 여기에 질문을 게시하기 전에 다음 번에 좀 더 신중하게 문서를 읽어야 아래 docs에서 직접 촬영) 모든 이미지는 높이가 동일해야하고, 고정 된 높이가 허용되는 경우 사용자 정의 높이

, 당신의 CSS를이 추가 :

.card-image{ 
    height: 400px; /* Your height here */ 
    overflow: hidden; 
}