在特定分辨率下更改图像的高度答案

【问题标题】：change height of images on specific resolution在特定分辨率下更改图像的高度
【发布时间】：2014-08-20 14:17:30
【问题描述】：

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

当用户在 480 像素以下查看它们时，我想更改图像的高度而不丢失它们的纵横比。

这是标记：

 <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 插件可以帮助我做到这一点？

【问题讨论】：

标签： html css twitter-bootstrap jquery-plugins

【解决方案1】：

你试过“.image-responsive”这个类吗？

<img src="..." class="img-responsive" alt="Responsive image">

来自http://getbootstrap.com/css/#images

【讨论】：

我已经添加了“img-responvie”类，但我忘了在这里添加。这对我没有帮助，因为图像的大小调整为 60px 高度，我希望它更大
不会破坏纵横比吗？
它会破坏，这就是为什么我要求一种在不破坏纵横比的情况下使图像更大的方法。我认为可以做到这一点，例如在分辨率低于 480 像素时提供另一张图片。
嗯，你不能，因此纵横比的定义。除非我误解了你的问题，否则你不能只调整高度而不调整宽度并保持纵横比不变。