Question

我使用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插件可以帮助我这样做？

Answer 1

你有没有尝试过课程＆＃34; .image-responsive＆＃34;？

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

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

在特定分辨率上更改图像的高度

1 个答案: