更改大小时缩放比例不正确

Question

目前正在创建一个网站并遇到一些对象的尺寸问题及其在CSS中的宽度/高度。我有一个表格，其中包含可以滚动的图像列表和＃34; shuffled＆＃34;但是这只是一个固定的大小和位置。如果我试图让它们变大，它们会相互分离，导致主页混乱。

我已经厌倦了使用元素而不是图像，问题仍然存在。

对象的当前大小为：

width: 390px;
height: 320px;

看起来像这样：

如您所见，此表下方有一个空间我想填写。所以当我改变高度来说＆＃34; 500px＆＃34;发生这种情况：

width: 390px;
height:500px;

更改宽度而不是修复它，ei：

width: 500px;
height:320px;

JSFiddle

所以问题：每当我更改列表的CSS大小时，它都不会产生正确的结果。我希望桌子能够填充页面的高度，最好使用百分比，这样它可以调整到不同的分辨率。我试图用px和％来改变大小，两者都没有产生很好的结果。我的HTML看起来像这样：

<table align="right" border="0">
<tbody align="right">
<tr>
  <td><div class="rotate">
     <div class="accordian">
       <ul>
         <li> <a href="#"> <img src="images/square_1.png"/> </a> </li>
         <li> <a href="#"> <img src="images/square_4.png"/> </a> </li>
         <li> <a href="#"> <img src="images/square_3.png"/> </a> </li>
         <li> <a href="#"> <img src="images/square_2.png"/> </a> </li>
         <li> <a href="#"> <img src="images/square_4.png"/> </a> </li>
         <li> <a href="#"> <img src="images/square_3.png"/> </a> </li>
         <li> <a href="#"> <img src="images/square_2.png"/> </a> </li>
         <li> <a href="#"> <img src="images/square_1.png"/> </a> </li>
       </ul>
     </div>
   </div></td>

accordian / rotate类看起来像：

 .rotate {
 -ms-transform: rotate(90deg); /* IE 9 */
 -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
 transform: rotate(90deg);
 }
.accordian {
 width: 500px;
 height: 320px;
 overflow: scroll;
 /*styling for shawdows*/
 margin: 70px auto;
 box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}