幅と高さの縮尺表

私はそれに画像付きのテーブルを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

など100vhとしてウィンドウの高さ、使用ビューポートの高さvhを行うにはまたは98vh：

、あなたは近代的なブラウザを使用していると仮定すると、このようcalc(100vh - 16px)として、それをcalc()を使用しています。

あなたも、この要件を持っているので：

画像が100％の画像がないことであれば

はあなたが意味するかありませんので強制は100％である場合にも表には、成長して停止する必要があります大きく、ビューポートの幅と高さの100％のテーブルを作成するだけで大きなものにならないように強制しないでください。

あなたは、それぞれ、これらの画像を含むテーブルを持っていますが、100vwと100vhなどmax-widthとmax-heightを持つことができるように思えるそうならば。

それとも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

答えて

関連する問題