高さの異なる画像を作る方法は、応答性を保ちながら同じ高さで表示されます。

Question

H everyone。私を助けてください。私はこのグリッドベースのフレームワークを使用しています。途中で私はこの

<section class="row"> 
    <div class="col-4"> 
    <img src="img/seo.jpg" alt="seo work" class="work-type"> 
    <h3 class="work-title">seo specialist</h3> 
    </div> 
    <div class="col-4"> 
    <img src="img/webdesign.jpg" alt="web design work" class="work-type"> 
    <h3 class="work-title">web designer</h3> 

のような3枚の画像を持っており、特定のimgクラスのために私は

.work-type{ 
    max-width: 100%; 
    height: auto; 
} 

今では応答作るために、このCSSを持っています。 3つの画像の高さが異なり、グリッドボックス内で異なる奥行きを持っています。どのCSSを使って同じ高さで表示させるのですか？

Answer 1

これはCSSと背景画像で簡単に行うことができます。このcodepenで

http://codepen.io/anon/pen/EyZxoP

、私は提案されたソリューションで、あなたの現在の問題を表示します。

イメージをマークアップの一部にしたい場合は、探しているソリューションに関する詳細情報を提供する必要があります。 （同じサイズに強制されている画像ではどうしたらいいですか？ストレッチしていますかクロッピングですか？これらの画像は動的に読み込まれていますか？ソースにハードコードされていますか？タイプは？これはWordPressですか？文脈レイアウトの詳細も良いでしょう）

divsには、スキューとストレッチを避けるための素早く/簡単なレイアウトと、レイアウトもの。この方法は、レスポンシブなレイアウトにも使用できます。

.img-cont{ 
    height:200px; 
    width:200px; 
}