我有这个小提琴：http: //jsfiddle.net/xVgun/
一旦我调整浏览器的宽度，图像就会变小（这就是我真正想要的），但表格不会。我希望表格单元格的宽度和高度也变小，因此按钮所在的单元格实际上是图片的大小。我不知道我应该如何解决这个问题，并且真的可以使用一些帮助。
CSS：
body, html {
font-family:"HelveticaNeue-Bold", sans-serif;
background-color: black;
max-width:640px;
margin-left: auto;
margin-right: auto;
}
.button1 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
max-width: 100%;
height:100%;
cursor:pointer;
border:none;
font-size: 0.1px;
}
.button2 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
height:100%;
cursor:pointer;
max-width: 100%;
border:none;
font-size: 0.1px;
}
.button3 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
height:100%;
max-width: 100%;
cursor:pointer;
border:none;
font-size: 0.1px;
}
.button4 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
height:100%;
max-width: 100%;
cursor:pointer;
border:none;
font-size: 0.1px;
}
.button5 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
max-width: 100%;
height:100%;
cursor:pointer;
border:none;
font-size: 0.1px;
}
.button6 {
background:url(http://thumb4.ftd.de/standardteaser/Image/2012/11/19/20121119200026.1845.maerskline.290x180.jpg) no-repeat center center;
background-size: 100%;
width:100%;
max-width: 100%;
height:100%;
cursor:pointer;
border:none;
font-size: 0.1px;
}
.header {
width: 100%;
}
.header img {
width: 100%;
}
.formClass {
width: 100%;
height:100%;
}
.sixButtons {
width: 100%;
height:100%;
}
table.sixButtons tr {
width:100%;
height:200px;
}
table.sixButtons td {
width:50%;
height:200px;
}
HTML：
<body>
<div class="header">
<img src="images/headerbefore.jpg" />
</div>
<form action="vote.php" method="post" class="formClass" name="buttonForm">
<table class="sixButtons">
<tr>
<td>
<button type="image" onclick="setavalue(1)" enctype="multipart/form-data" id="votingvalue1" class="button1">
</td>
<td>
<button type="image" onclick="setavalue(2)" enctype="multipart/form-data" id="votingvalue2" class="button2">
</td>
</tr>
<tr>
<td>
<button type="image" onclick="setavalue(3)" enctype="multipart/form-data" id="votingvalue3" class="button3">
</td>
<td>
<button type="image" onclick="setavalue(4)" enctype="multipart/form-data" id="votingvalue4" class="button4">
</td>
</tr>
<tr>
<td>
<button type="image" onclick="setavalue(5)" enctype="multipart/form-data" id="votingvalue5" class="button5">
</td>
<td>
<button type="image" onclick="setavalue(6)" enctype="multipart/form-data" id="votingvalue6" class="button6">
</td>
</tr>
</table>
<input id="votingvalue" type="hidden" value="" name="votingvalue">
<input type="hidden" value="2" name="voteid">
</form>
</div>
</body>
</html>
JS：
function setavalue(value) {
value = parseInt(value);
if (value === 1) {
document.getElementById('votingvalue').value = '1';
} else if (value === 2) {
document.getElementById('votingvalue').value = '2';
} else if (value === 3) {
document.getElementById('votingvalue').value = '3';
} else if (value === 4) {
document.getElementById('votingvalue').value = '4';
} else if (value === 5) {
document.getElementById('votingvalue').value = '5';
} else if (value === 6) {
document.getElementById('votingvalue').value = '6';
}
document.forms["buttonForm"].submit();
}
编辑：现在我改变了它，所以它都是百分比：http: //jsfiddle.net/xVgun/2/
但现在这种行为更奇怪了。我的表格单元的高度太小了，尽管我认为它应该显示为表格大小的 33%...
我现在真的陷入了死胡同，不知道我做错了什么-.-
问候弗洛