1

我正在使用 Bootstrap 2 为我的电影门户创建响应式设计。

我想让图像高度与其他图片相同。当我手动设置图片高度时,它看起来很漂亮,所有图片都与其他图片处于同一水平。

但是当我在平板电脑上打开网站时,所有的图片看起来都被压缩了!

示例 1:

在此处输入图像描述

如果我从图片中删除高度,那么图片与其他图片不在同一水平并且看起来很糟糕。

示例 2:

在此处输入图像描述

也许你知道如何解决它?

HTML:

<div class="span2 item all">
   <div class="picframe img-polaroid">
      <span class="overlay">
      <span class="info-area">
      <a class="img-icon-url" href="/movie"></a>
      </span>
      <span class="pf_text">
      <span class="project-name">Movie Name</span>
      <span>Genre</span>
      </span>
      </span>    
      <img data-original="pictur.jpg" src="picture.jpg" alt="" class="poster"/>
   </div>
</div>

CSS:

.poster {
   width:170px;
   height:226px;
}
4

1 回答 1

0

您可能会使用 Bootstrap 3,因为制作响应式图像非常容易:

响应式图像

<img src="..." class="img-responsive" alt="Responsive image">
于 2013-11-04T11:54:20.863 回答