Question

只要我在宽度上调整浏览器大小，图像就会变小（这就是我真正想要的），但是表格不会。我希望tablecells的宽度和高度也变小，因此按钮所在的单元格实际上是图片的大小。我不知道我应该如何解决这个问题，并且可以真正使用它。

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％......

我现在真的走到了尽头，不知道我做错了什么 - .-

电贺 FLO

Answer 1

尝试将max-width更改为width

调整浏览器窗口大小会导致表格单元格中的奇怪行为

1 个答案: