html - 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;
    }