如何讓不同高度的圖像在保持響應的同時出現在同一高度，

Question

H大家。請幫助我。我正在使用這個基於網格的框架。中間我有3張相似圖片

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

而對於具體的IMG類我有作出響應它現在

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

這個CSS。三個圖像具有不同的高度，並且它們在網格框內採用不同的空間高度。我用什麼CSS使它們全都出現在相同的高度？

Answer 1

您可以輕鬆地使用CSS和背景圖片來完成此操作。

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

在這種codepen，我提出的方案顯示您當前的問題。

如果您希望圖像成爲標記的一部分，那麼您需要提供有關所需解決方案的更多信息。 （圖片被迫變成相同的尺寸會發生什麼？我們是否在伸展它們？剪裁？這些圖像是否動態加載？在源代碼中進行了硬編碼？它們是否包含自定義帖子類型的圖像，這是wordpress的嗎？上下文佈局的細節也會很好。）

我已經給div的背景圖像屬性來快速/容易地避免偏斜和拉伸，以及任何其他形式的失真，因爲佈局東東。此方法也可用於響應式佈局。

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