限制預先img的大小。使用jQuery前面加上內TD

的img我有一個3x3的表格看起來像這樣後尺寸越來越扭曲：限制預先img的大小。使用jQuery前面加上內TD

<table> 
    <tbody> 
    <tr> 
     <td id='a1'></td> 
     <td id='b1'></td> 
     <td id='c1'></td> 
    </tr> 

    <tr> 
     <td id='a2'></td> 
     <td id='b2'></td> 
     <td id='c2'></td> 
    </tr> 

    <tr> 
     <td id='a3'></td> 
     <td id='b3'></td> 
     <td id='c3'></td> 
    </tr> 
    </tbody> 
</table>

的Javascript（特別是jQuery的/ CoffeeScript中）看起來像這樣：

$(document).ready -> 
    $("td").click -> 
    $("<img src='download.jpg'/>").prependTo @

和CSS看起來像這樣：

table { 
    border-collapse: collapse; 
    border: solid 1px #999999; 
    box-shadow: 2px 2px 4px #cccccc; 
    -moz-box-shadow: 2px 2px 4px #cccccc; 
    -webkit-box-shadow: 2px 2px 4px #cccccc; 
    width: 300px; 
    height: 300px; 
} 

table th, td { 
    padding: 3px; 
    line-height: 13px; 
    border-left: solid 1px #AAAAAA; 
    border-bottom: solid 1px #AAAAAA; 
} 

img { 
    max-width:100px; 
    max-height: 100px; 
    padding: 0px; 
    margin:0; 
}

當我點擊一個單元格，並且圖像被預置時，我想要第e圖像來填充單元格，而不是歪斜我的表格的大小。基本上我想鎖定表格和9個單元格的當前大小，並將圖片預先設置爲不會對錶格和單元格的大小/邊框進行可見的更改。

目前，當我前置時，表格會發生傾斜，圖像位於單元格的最左側，並且所添加的單元格比所有其他單元格更大。

來源

2012-03-15 Xaca Xulu

如果它們的尺寸是固定的，請嘗試在td CSS上使用width和height，而不是max-width和max-height。看到這個小提琴：here。

來源

2012-03-15 19:03:51 Paul

謝謝！那就是訣竅。 – 2012-03-15 19:04:38

super nanba .... – anglimasS 2012-05-15 07:50:06

如果所有圖像都具有相同的尺寸，你可以有一個大小的透明圖像中的所有細胞（100×100？），當有人點擊，你可以下載圖片更換TD的內容

來源

2012-03-15 18:57:20 Rodolfo

限制預先img的大小。使用jQuery前面加上內TD

回答

相關問題