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>

现在，代码似乎只能在库中使用如果您第一次进入，如果您重新输入或再次输入代码崩溃并且图像高度合适但重叠

请在刷新页面时帮助我对代码和图像进行核心处理。 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％身高的重要因素是每个父母也必须使用100％，这包括html和身体。

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％功能。

Answer 2

要使元素适合页面的整个高度，您需要设置所有先前元素的高度。

所以，试试这个CSS：

html, body { height: 95% }

并设置包含表格的其他元素的高度（如果有）。

Answer 3

首先将<div class="space"></div>高度设置为0px。将您的img标签更改为div并设置背景图片。

<div class="single-img">    
   <table cellpadding="0" cellspacing="0"style='width:100%!important;height:100%!important;'>
      <tbody>
         <tr>
           <td style='width:100%!important;height:100%!important;'> 
           <div style='width:100%!important;height:100%!important; background-image:url(image1);' ></div>
           </td>           
          </tr>
           <!-- another images  ...  -->
      </tbody>
    </table>
</div>

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

3 个答案: