0

我有八张 640x480 的图像。它可能会波动一两个，我希望它们均匀分布并集中在一行上。

IIUC iPhone 6 的屏幕为 1334x750。所以我希望至少有两个 640x480 的图像连续。然而，由于屏幕具有“高像素密度”，也许更多？

我的笔记本电脑的分辨率为 1080p，也就是 1920 像素，所以我希望至少三张图像可以清楚地显示在一行中。

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

我开始编写JSBIN，但我很困惑如何按照我想要的方式标记 Bootstrap。

4

1 回答 1

0

就个人而言，在这种特定情况下，我可能会使用 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>

于 2015-12-05T04:37:22.403 回答