Twitter Bootstrap ansprechende Bilder mit unterschiedlichen Größen Größenänderung unproportionaly

Question

Ich bin neu mit der img-responsive Klasse auf Bootstrap, habe ich die folgende Seite:

Ich mag die Bilder dort zeigen mit den gleichen Anteilen, für Beispiel wie die Bilder rechts. Ich habe dieses CSS hinzugefügt und die Klasse auf das Bild angewendet, aber wenn ich die Größe des Fensters ändere, ist die responsive Größenanpassung nicht proportioniert.

.imageClip{ 
    width:350px; 
    height:255px; 
    overflow:hidden; 
} 

Beispiel mit dem CSS Ändern der Größe hinzugefügt:

Dies ist mein Code:

<div class="col-sm-4"> 

     <img class="img-responsive imageClip" src="{$servicio.med_ruta}"> 

     <h3>{$servicio.ser_nombre}</h3> 
     <p>{$servicio.ser_descripcion}</p> 
     <a class="btn btn-link btn-sm pull-right">More <i class="icon-angle-right"></i></a> 
</div> 

Ich mag würde wissen, ob es ein Weg, dies ohne das zu tun unproportionierte Größenanpassung. Danke

Answer 1

Versuchen mit:

.imageClip{ 
    width:30%; 
    height: auto; 
    overflow:hidden; 
} 

Es wird Anteil zu halten und reaktionsschnell sein. (Ich habe 30% als Standard, können Sie es anpassen)

Answer 2

Dies ist, weil Sie die Bilder zwingen ein bestimmtes Verhältnis zu passen ...

.imageClip 
    { 
    width:350px; 
    height:255px; 
    overflow:hidden; 
    } 

Sofern Ihr Bild zu einem Verhältnis, das passt ist 350x255 dann werden sie überproportional sein. Sie müssen ENTWEDER die Breite ODER Höhe einstellen und die entgegengesetzte Achse auf auto setzen. Dadurch kann der Browser das Bild proportional skalieren.

.imageClip 
    { 
    width:350px; 
    height:auto; 
    overflow:hidden; 
    }