Bootstrap响应式图像布局 - 调整大小

时间:2014-07-14 16:09:06

标签: jquery html css twitter-bootstrap

我使用此引导程序模板作为我的基础:http://startbootstrap.com/templates/grayscale/并且我试图获得相同的结果,但我没有使用GRAYSCALE大文字,而是想使用是421x515px。

我的问题是,在原始页面(参见上面的链接)中,无论屏幕分辨率如何,这些向下箭头都会保持可见状态。我在复制时遇到了问题。有人可以帮帮我吗?

我已经使用了" img-responsive"图像的类,但它似乎不起作用(不应该调整图像大小)。

是谁愿意帮忙?感谢。

编辑:示例链接:http://jsfiddle.net/x8EpU/5/

<img src="http://placehold.it/421x515" class="img-responsive">

1 个答案:

答案 0 :(得分:0)

向下箭头实际上不会在任何分辨率下保持可见。尝试使您的浏览器非常短,他们最终将离开屏幕。它实际上只是垂直居中整个块(标题,文本和箭头),但如果屏幕比这个内容短,它看起来不正确。

在您的代码中,您使用如此大的图像使块的大小大于屏幕的高度。尝试缩小浏览器几次,即使图像也可以看到它正常工作。

尝试删除img-responsive上的img课程并添加以下样式:max-width: 100%; max-height: 150px;