応答可能なマテリアライズカードの作成

Question

マテリアライズカードを使用して、私たちのサイトに画像を表示しています。画像はユーザーがアップロードしているので、さまざまなサイズで表示されます（250ピクセル以上でなければなりません）。

画像のアスペクト比を維持することは可能ですが、各行のカードの高さを同じにするにはどうすればよいか分かりません。これは私たちの目標です。カード内の画像のアスペクト比を維持しながらカードを同じ高さにする（応答性の高い方法で）ことです。

我々は非常に遠く取得せずに一日中、このをいじってきました。どんな助けも大歓迎です。

HTML：

<div class="row text-center"> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"interior"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Interior</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Drivetrain</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"performance"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Performance</h5> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

.card { 
    position: relative; 
    background-color: #f4f4f4; 
    // margin: 10px auto; 
    height: 100%; 
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.7); 
} 

.card { 
    height: 100%; 
} 

.card .card-image img { 
    //object-fit: contain !important; 
} 

Answer 1

使用するメディアクエリー画面のサイズに応じて幅/高さを設定します。 JSフィドルでの例：https://jsfiddle.net/3yegzwex/

HTML：

<div class="row text-center"> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"interior"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Interior</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Drivetrain</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"performance"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Performance</h5> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：画像は本当にインラインであることを

.card { 
    text-align: center; 
} 

@media (max-width: 990px) { 
    .resizeimg { 
    height: auto; 
    } 
} 

@media (min-width: 1000px) { 
    .resizeimg { 
    width: auto; 
    height: 350px; 
    } 
} 

Answer 2

を持っていますか？または、ユーザーがアップロードしているので、background-imageに設定することはできますか？その場合は、background-sizeプロパティをcoverに設定して問題に対処することができます。また、object-fitはnot widely supported（まだ）です。

カバー

含まの逆数であるキーワード。可能な限り画像を拡大/縮小し、画像の縦横比を維持します（画像は になりません）。イメージは、 コンテナの幅または高さ全体を「カバー」します。画像とコンテナの寸法が異なる場合、画像は左右または上/下のいずれかにクリップされます。

出典：MDN

デモのthis updated JSFiddleを参照してください。 padding-bottomは、必要に応じてパーセンテージに変更できます。それを変更し、それが何を参照してくださいしようとします。

---

インライン画像

画像をインラインでなければならない場合は、このソリューションを適用することができます。

.card-image { 
    width: 100%; 
    padding-bottom: 50%; 
    overflow: hidden; 
    position: relative; 
} 

.card-image img { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

画像が.card-imageの内側に押され、その幅に引き伸ばされますそれが必要です。デモについては、this JSFiddleを参照してください。 padding-bottomは、必要に応じてパーセンテージに変更できます。それを変更し、それが何を参照してくださいしようとします。