私はこのフィドルを持っています: 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% のように表示する必要があると思います...
私は本当に行き止まりにいて、何が間違っているのかわかりません-.-
フローに挨拶