Question

我有八个640x480图像。它可能会波动一两个，我希望它们均匀分布。以一排为中心。

IIUC iPhone 6的屏幕为1334x750。所以我希望连续至少有两个640x480的图像。然而，由于屏幕具有高像素密度＆＃34;可能更多？

我的笔记本电脑的分辨率为1080p，即1920像素，所以我希望这行中至少可以清晰显示三张图像。

对于不适合行的图像，我希望它们可以在下一行或稍微调整以适应。

我开始写JSBIN，但我很困惑如何按上述要求标记Bootstrap。

Answer 1

就个别情况而言，我可能会使用flexbox ......

注意：请务必测试它是否符合您的浏览器要求：http://caniuse.com/#feat=flexbox

是的，以下CSS可以真正简化 - 我只是通过http://the-echoplex.net/flexyboxes/

快速生成了这个

您仍然可以将图像放在.col-* div中以更准确地控制某些设备上的尺寸 - 但如果640x480是您的目标，则不需要它。

.img-fill {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  -webkit-align-content: space-around;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
.img-fill .img-responsive {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
html,
body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

<div class="img-fill">
  <img class="img-responsive" src="http://i.imgur.com/ocV1u5R.jpg">
  <img class="img-responsive" src="http://i.imgur.com/zpoJ1aL.jpg">
  <img class="img-responsive" src="http://i.imgur.com/ocV1u5R.jpg">
  <img class="img-responsive" src="http://i.imgur.com/zpoJ1aL.jpg">
  <img class="img-responsive" src="http://i.imgur.com/ocV1u5R.jpg">
  <img class="img-responsive" src="http://i.imgur.com/zpoJ1aL.jpg">
  <img class="img-responsive" src="http://i.imgur.com/ocV1u5R.jpg">
  <img class="img-responsive" src="http://i.imgur.com/zpoJ1aL.jpg">
</div>

Bootstrap 3种方式连续布置8幅图像

1 个答案: