html - 不同大小的 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%，大家可以随意调整)