Wie man Bild mit unterschiedlicher Höhe bildet, erscheinen in der gleichen Höhe, während sie reaktionsfähig bleiben,

Question

H jeder. Bitte hilf mir. Ich verwende dieses gitterbasierte Framework. in der Mitte habe ich 3 Bilder wie diese

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

Und für die spezifische img Klasse habe ich diese CSS für die es als Reaktion

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

Jetzt. Drei Bilder haben unterschiedliche Höhe und nehmen unterschiedliche Raumhöhen innerhalb der Gitterbox ein. Welche CSS verwende ich, um alle mit derselben Höhe erscheinen zu lassen?

Answer 1

Sie können dies einfach mit CSS und Hintergrundbildern tun.

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

In diesem codepen ich Ihre aktuellen Ausgabe mit der vorgeschlagenen Lösung anzuzeigen.

Wenn Sie möchten, dass die Bilder Teil des Markups sind, müssen Sie weitere Informationen zu der von Ihnen gewünschten Lösung bereitstellen. (Was soll mit den Bildern passieren, die gezwungen werden, die gleichen Dimensionen zu werden? Werden wir sie dehnen? Zuschneiden? Werden diese Bilder dynamisch geladen? Fest codiert in der Quelle? Sind sie mit Bildern für einen benutzerdefinierten Beitragstyp versehen, wie ein Mitarbeiterpost- Typ? Ist das Wordpress? Kontextuelle Layout Details wäre auch gut.)

Ich habe divs die Hintergrund-Bild-Eigenschaften zu schnell/leicht zu vermeiden Verzerrung und Dehnen, sowie jede andere Form der Verzerrung wegen des Layouts gegeben Sachen. Diese Methode kann auch für Responsive Layouts verwendet werden.

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