0

I have eight 640x480 images. It might fluctuate one or two, and I want them evenly distributed & centered on a row.

IIUC an iPhone 6 has a screen of 1334x750. So I expect at least two 640x480 images on a row. However since the screen has a "high pixel density", maybe more?

My laptop has a resolution of 1080p aka 1920 pixels across, so I expect at least three images to be clearly shown on the row.

For images that don't fit on row, I expect them on the next row or maybe slightly tweaked to fit.

I'm begun writing a JSBIN but I am puzzled how to mark up Bootstrap as I want above.

hendry
  • 9,725
  • 18
  • 81
  • 139

1 Answers1

0

Personally in this specific case I would probably use flexbox...

Note: Remember to test it meets your browser requirements: http://caniuse.com/#feat=flexbox

Yes the following CSS can be really simplified - I just generated this quickly via http://the-echoplex.net/flexyboxes/

You can still put the images in .col-* div's to more accurately control the size on some devices - but it's not needed if 640x480 is your target.

.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>
Dean Taylor
  • 40,514
  • 3
  • 31
  • 50
  • Hopefully I can mix in flexbox stuff in bootstrap. I was actually trying it myself here: https://jsbin.com/hufaju/4/edit?html,css,output However focusing on your code, yours doesn't come close to spanning 3 images on a 1920 wide screen. And what about pixel densities for IOS? Thanks! – hendry Dec 05 '15 at 05:07
  • It does if you remove the padding / margins etc on the `html` and `body` tags and remove scroll bars - I've updated it the sample. I would open pixel densities as a separate question. Remember to take into account browser chrome/UI border widths if you are using a desktop browser. – Dean Taylor Dec 05 '15 at 05:53