Question

请考虑以下代码。如何以响应方式实现表格，使得在大屏幕上，表格高度和宽度等于图像（例如600x600）的总和，并且在诸如移动设备的较小屏幕上，表格按比例缩小图像。例如，在屏幕宽度为320像素的iPhone上，我希望表格缩小到320x320，同时保留图像宽高比。

<HTML>
<head></head>
<body>
    <div id="header"></div>
    <div id="table"
    <table style="height: 100%">
        <tr>
            <td>
                <img id="topleft" src="300x300.png">
            </td>
            <td>
                <img id="topright" src="300x300.png">
            </td>
        </tr>
        <tr>
            <td>
                <img id="bottomleft" src="300x300.png">
            </td>
            <td>
                <img id="bottomright" src="300x300.png">
            </td>
        </tr>
    </table>
</div>
<div id="footer"></div>
</body>
</html>

这是一张图片，展示了上述代码在移动版Safari浏览器中的呈现方式。

enter image description here

Answer 1

如果每行有2个图像，则可以将表格宽度设置为100％，将td和img宽度设置为粗略49％（以保持边框）。此外，如果您的图像可能小于可能的屏幕尺寸，请使用img {max-width: 49%;}

之类的内容

Answer 2

自适应表维度可能很棘手。我建议的第一件事是将表格放在一个属性为position: relative的div中，然后以这种方式控制边距和大小。

<div id="myCont" style="">
    <table>
        <tr>
            <td> Hello! </td>
            <td> Aloha! </td>
        </tr>
        <tr>
            <td> Goodbye! </td>
            <td> Aloha! </td>
        </tr>
    </table>
</div>

然后是一些css：

#myCont {
    position: relative; 
    width: 100%;
}
#myCont table {
    width: 100%;
}
#myCont table tr td {
    width: 50%;
    position: relative;
}
.imgCls {
    width: 100%;
}

如果您将表格设置为<table cellspacing="0" cellpadding="0">，那么您将可以更轻松地获得准确的尺寸和“清晰的平板”。

另外，如果您只设置width属性，img标签将始终尊重宽高比。

为此，我可能会推荐一个jQuery解决方案。

<img class="imgCls" src="/path/to/img.png" />

<script type="text/javascript">
$(document).ready(function(){
    var imgw = $('.imgCls').parent('td').css('width');
    $('.imgCls').css('width',imgw);
});
</script>

只要imgCls类的图像宽度均匀（或希望是）均匀，{p> 1}将采用第一个var imgw的宽度，这样的事情应该有用。它找到了。

Answer 3

我建议您尝试使用此css代码：

img{ width: 49%;  }

http://jsfiddle.net/xeSLA/

根据屏幕大小按比例缩小包含图像的HTML表格

3 个答案: