根据特定分辨率更改图像高度

我正在使用Twitter Bootstrap,我有一组包含一些图像的列。

当用户在480px以下观看图像时,我希望更改图像的高度,而不丢失其纵横比。

以下是标记:

 <div class="container-fluid">
   <div class="row">
   <div class="project no-padding col-xs-12">

      <a href="#">
          <figure>
            <img class="img-responsive" src="image.jpg">
          </figure>

      </a>

   </div>
   </div>
   ...

我尝试过使用这个CSS:

@media (max-width: @screen-xs-min) {

.project img { height:200px;}

}

这样做的问题是,将图像拉伸到那个高度,看起来一点都不好看。

有什么变通方法可以用CSS实现这一点吗?如果没有,有任何JS插件可以帮助我做到这一点吗?