html - 如何使 HTML 表格图像适合窗口高度？

Question

首先，我的想法是创建我的网站，其中的投资组合图片会自动适应浏览器窗口的高度。我不是 html 代码方面的专家，但我认为我非常接近我想要的样子。

这是我的问题:http://www.stelianpopa.ro/photo-outdoor.html

CSS:

table{
height: 100% !important;
border-collapse:collapse;
border-spacing:1px;
position: absolute;
z-index: -100;
}

table td{
width: 100% !important;
position: relative;
vertical-align: middle;
}

table td img {
height: 100% !important;
margin-right: 5px;
}

HTML:

<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></td>
<td><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></td>
<td><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></td>
</tr>
</table>

目前代码似乎只在图库中IF YOU ENTER FIRST TIME 有效，如果您刷新或再次输入代码崩溃并且图像高度适合但重叠 .

请帮助我纠正代码和刷新页面时图像不重叠的问题。 PS:代码在 Chrome 中测试，在其他浏览器中根本不起作用，它们不调整大小...为什么？

Answer 1

我有一些建议。失去对表格的使用。

<ul>
    <li><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></li>
    <li><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></li>
    <li><img src="http://www.stelianpopa.ro/uploads/series/ld0.jpg"></li>
</ul>

那么在你的 CSS 中，100% 高度的重要因素是每个 parent 也必须使用 100%，这包括 html 和 body。

html,body {
    height: 100%;
}
ul {
    white-space: nowrap; /* stops li elements from wrapping to next line */
    height: 100%;
}
li {
    list-style: none; /* just to remove dotted list */
    height: 100%;
    display: inline; /* makes list elements horizontal */
}
img {
    height:100%;
}

这是一个 jsfiddle:http://jsfiddle.net/wboco/VRYWg/1/

* 为什么这个被正确标记然后被删除？

删除:

<div class="single-img">    
<div id="gallery">

来自包装您网站上的无序列表。然后将 CSS 添加到我之前提供的 ul li 和 img 中。这是 100% 的功能。