我有八个640x480图像。 它可能会波动一两个,我希望它们均匀分布并以一行为中心。
IIUC和iPhone 6的屏幕为1334x750。 所以我希望连续至少有两个640x480的图像。 然而,由于屏幕具有“高像素密度”,可能更多?
我的笔记本电脑的分辨率为1080p,即1920像素,所以我希望在行上能清晰显示至少三张图像。
对于不适合行的图像,我希望它们在下一行或者可能稍微调整以适应。
我开始写一个JSBIN,但我很困惑如何按照我的要求标记Bootstrap。
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.
最满意答案
就个人而言,我可能会使用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>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>
更多推荐
希望,row,电脑培训,计算机培训,IT培训"/> <meta name="description" cont
发布评论