排列 Bootstrap 响应式图像答案

【问题标题】：Lining up Bootstrap responsive images排列 Bootstrap 响应式图像
【发布时间】：2014-03-02 06:38:13
【问题描述】：

我有三张图片，我正在尝试制作一个三张图片面板作为页面的桅杆头图片。下面是一个例子：

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 长，感觉中间图像有某种尺寸/比例，可以使其缩放到与外部图像相同的高度。最终目标是让三个图像的高度相同，而不受屏幕影响。

我是不是疯了，还是应该使用某种图像尺寸组合？

【问题讨论】：

标签： css image twitter-bootstrap image-processing responsive-design

【解决方案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

【讨论】：

你认为这会有帮助吗？因为缩略图通常是统一大小的，但我的问题是我有 2 张照片分辨率，我想尝试通过使用图像的分辨率和列宽来垂直排列。
嗯，我认为这可能是一个解决方案，我能理解你想要做什么。快速浏览我的网站。 artoffitz.com/#drawing，如果这是你想要做的？图像本身都是不同的尺寸，使用 holder.js 并使用第 3 列，图像保持在相同的宽度内，长度调整为最终比例。最后，您可以使用 % 在两个外部图像上添加填充，以便它们保持对屏幕尺寸的响应。
关闭，但在不同的列中它会调整宽度以使所有行的图像高度相同。
嗨，杰夫，我用第二个网址更新了我的答案到一个例子。让我知道这是否更接近您可能正在寻找的东西。我还意识到我在我的站点中留下了一些需要删除的代码。因此，感谢您让我解决您的问题... :) 另外，您似乎正在为图像使用 MVC。如果是这样，我想看看你的结果。我一直在使用 Backbone 和 Angular，并计划使用这种类型的图像模板注入来更新我的网站。
嗯，这很有趣......我用你的演示做了这个：<div class="container-fluid"> <div class="col-xs-4 col-md-4"> <img class="thumbnail1" src="holder.js/400x800"> </div> <div class="col-xs-4 col-md-4"> <img class="thumbnail1" src="holder.js/800x400"> </div> <div class="col-xs-4 col-md-4"> <img class="thumbnail1" src="holder.js/400x800"> </div> </div> 它似乎工作，但我必须说我不完全理解这 3 张图片是 79px 高，然后一种正确的缩放比例，但并不完全正确。