自动居中列表项目/图像100%页面高度

时间:2013-05-17 14:47:10

标签: javascript jquery css responsive-design image-gallery

基本上,我想要实现的是以下布局;

http://farm9.staticflickr.com/8256/8746793625_d3fed90c54_b.jpg

我尝试过使用表格,但无法将图片调到100%的页面高度 我已尝试使用display:inline创建一个无序列表,并正确调整图像大小,但我无法“居中”在列表中的“main”或第二项上。

我受限于我无法指定图像的尺寸。 我想坚持使用CSS,除非有可能用Jquery测试窗口大小并以某种方式提供它吗? (我很陌生)

我完全没有想法,有人可以帮忙吗?!?!

干杯!

这和我一样接近;

<body>
<div class="wrapper" style="position:absolute; width:100%; height:100%; margin:0; padding:0; top:0; left:0;">

    <table style="position:absolute; width:100%; height:100%; margin:0; padding:0; top:0; left:0; text-align:center;    white-space: nowrap;    overflow:hidden;">

            <td style="width:20%" ><img style="position:relative;width:auto;max-height:100%" src="http://shellsuitzombie.co.uk/wp-content/uploads/2013/04/Brad-Rose-I-never-finish-anything.jpg"></td>
            <td style="width:60%" ><img style="position:relative;width:auto;max-height:100%" src="http://shellsuitzombie.co.uk/wp-content/uploads/2013/04/Brad-Rose-I-never-finish-anything.jpg"></td>
            <td style="width:20%" ><img style="position:relative;width:auto;max-height:100%" src="http://shellsuitzombie.co.uk/wp-content/uploads/2013/04/Brad-Rose-I-never-finish-anything.jpg"></td>


</tr></table></div></body>

1 个答案:

答案 0 :(得分:5)

问题应在于您的表格安排 请您查看表格以及发送上传文件的位置。天气正在调用jQuery或不调用你的jquery函数,并将图像的宽度和高度设置为100%,如果你给我你的网站链接,我会为你做。