规模表在宽度和高度

我有一张表3x3与图像在它。我想让桌子随着窗户宽度和高度而缩放。规模表在宽度和高度

随着宽度的缩放不是一个问题，迄今为止工作，但我没有得到它与高度的工作。目的是在图像之间看到整个表格没有间隙。此外，如果图像为100％，则表格应停止增长，因此不会强制100％。只有CSS才有可能？

感谢您的帮助

这就是我有这么远：

<head> 
    <style> 
     * { margin: 0;padding: 0; line-height: 0;} 
     html, body 
     { 
     height: 100%; 
     } 
     #imgHolder { 
     max-width:100%; 
     max-height:100%; 
     height: auto; 
     width:auto; 
     border-collapse: collapse; 
     } 
     img { 
     width: 100%; 
     } 
    </style> 
    </head> 
    <body> 
    <table id="imgHolder"> 
     <tr> 
     <td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td> 
     </tr> 
     <tr> 
     <td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td> 
     </tr> 
     <tr> 
     <td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td><td><img src="https://www.lionkeen.net/assets/img/cat.jpg" /></td> 
     </tr> 
    </table> 
    </body>

这里是一个小提琴：https://jsfiddle.net/xhaqzzkj/

来源

2016-04-23 celevra

要做到窗口的高度，运用视高vh，如100vh或98vh：

，并使用calc()它，如calc(100vh - 16px)，假设你使用的是最新的浏览器。

既然你也有这样的要求：

而且该表应停止生长，如果图像是100％，因此没有强制100％

你的意思是，如果图像是不是大，不要强迫它们变大，只是为了使桌子100％的视口宽度和高度？

如果是的话，好像你可以有一个包含这些图像的表，但有一个max-width和max-height分别100vw和100vh。

或者你可以让td，图象max-width: 33vw和max-height: 33vh像下面的示例：https://jsfiddle.net/xhaqzzkj/7和https://jsfiddle.net/xhaqzzkj/8

来源

2016-04-23 08:54:52

我不明白怎么说解决我的问题，你可以请指导我在正确的方向？ – celevra

请参阅更新回答 –

不幸的是，这不工作。请看我的jsfiddle。我想要的是现在使用宽度但与连接高度相同的行为。 – celevra

规模表在宽度和高度

回答

相关问题