不同大小的 Twitter Bootstrap 响应式图像不成比例地调整大小答案

【问题标题】：Twitter Bootstrap responsive images with different sizes resizing unproportionaly不同大小的 Twitter Bootstrap 响应式图像不成比例地调整大小
【发布时间】：2013-11-09 06:15:41
【问题描述】：

我是在引导程序上使用 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>

我想知道它是否可以在不按比例调整大小的情况下做到这一点。谢谢

【问题讨论】：

你发布的第二张截图有什么问题？

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

尝试：

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

它会保持比例并且反应灵敏。（我默认设置为 30%，随意调整）

【讨论】：

【解决方案2】：

这是因为您强制图像适合给定的比例...

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

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

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

【讨论】：