規模表在寬度和高度

我有一張表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

規模表在寬度和高度

回答

相關問題