我正在使用 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;
}
最佳答案
您可能会使用 Bootstrap 3,因为它很容易制作响应式图像:
<img src="..." class="img-responsive" alt="Responsive image">
关于css - 图片高度响应 Bootstrap 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19766744/