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

时间:2015-08-15 18:24:19

标签: html css web

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

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

对象的当前大小为:

width: 390px;
height: 320px;

看起来像这样:enter image description here

如您所见,此表下方有一个空间我想填写。所以当我改变高度来说" 500px"发生这种情况:

width: 390px;
height:500px;

enter image description here

更改宽度而不是修复它,ei:

width: 500px;
height:320px;

enter image description here

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);
}

0 个答案:

没有答案