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

Question

我是新手在引导程序中使用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％作为默认值，随意调整它）

Answer 2

这是因为你强迫图像适合给定的比例......

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

除非您的图像的比例适合350x255，否则它们将不成比例。 您需要设置宽度或高度，并将相反轴设置为自动。 这将允许浏览器按比例调整图像大小。

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