Question

我有三个图像，我正在尝试将三个图像面板作为页面的桅杆头部图像。以下是一个例子：

http://img0.etsystatic.com/016/0/5770030/il_340x270.467796830_hsfc.jpg

外部图像的宽高比为1：2（但可以略微灵活），中间图像的尺寸更具延展性。以下是代码。

<div class='container-fluid'>
  <div class="row">
  <div class="col-md-3">
    <%= image_tag('Image1.jpg') %>
  </div>
  <div class="col-md-6">
    <%= image_tag('Image2.jpg') %>
  </div>
  <div class="col-md-3">
    <%= image_tag('Image3.jpg') %>
  </div>
  </div>
</div>

现在，图像2不像图像1和图像3那样长，感觉中间图像存在某种尺寸/比率，这使得它可以缩放到与外部图像相同的高度。无论屏幕如何，最终目标都是使三幅图像的高度相同。

我是疯了还是有一些图像尺寸组合可以使用？

Answer 1

查看Bootstrap Thumbnails http://getbootstrap.com/2.3.2/components.html#thumbnails的文档。我在自己的网站上玩这个。 Bootstrap可以依赖这些类来获取图像，它使用data-src =“holder.js”。 class =“img-responsive”data-src =“holder.js / 100％x180”

在holder.js / 之后您的预定义尺寸*

这允许将图像放大或缩小到Bootstrap定义的边界区域。

的修订版 的 *

所以我进一步观察，我仍然认为使用此选项将起作用。这是我放在一起的样本的链接。我刚刚在class="thumbnail"上进行了覆盖，您可以在结束</head>之前看到此覆盖

https://github.com/Gregory-Phillips/twitter-bootstrap-sandbox/blob/master/imageHeight.html

排队Bootstrap响应式图像

1 个答案: