マテリアライズカードが等しくない高さ

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はカード（小、中、大）のための3つのデフォルトのサイズを提供しています。 これらは次のように追加することができます（タイトル「カードサイズ」の下で、docsから直接取得...次の時間をあなたがここにあなたの質問を投稿する前にあなたはより慎重にドキュメントを読んでください）

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

すべての画像が同じ高さを持っている必要があり、かつ一定の高さが許容される場合は、カスタム高さは

、あなたのCSSに以下を追加：

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