Twitter Bootstrap响应式图像具有不同大小调整大小不一致

Question

我是新的在bootstrap上使用img-responsive类,我有以下页面:

我希望图像以相同的比例显示在那里,例如像右边的图像.我添加了这个CSS并将该类应用于图像,但是当我调整窗口大小时,响应大小调整不成比例.

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

使用CSS添加调整大小的示例:

这是我的代码:

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

我想知道它是否有办法在没有不成比例的大小调整的情况下做到这一点.谢谢

Answer 1

试试:

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

它会保持比例并且会有所回应.(我把30%作为默认值,随意调整)