1

考虑以下代码。我如何以响应方式实现表格，以便在大屏幕上，表格的高度和宽度等于图像（例如 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 浏览器中呈现的图像。

在此处输入图像描述

4

3 回答 3

1

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

于 2013-01-28T18:39:41.927 回答
0

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

<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该类的图像的宽度是（或希望是）均匀的，这样的东西就应该起作用，它将采用它找到var imgw的第一个的宽度。.imgCls

于 2013-01-28T19:01:36.567 回答
-2

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

img{ width: 49%;  }

http://jsfiddle.net/xeSLA/

于 2013-01-28T18:41:14.353 回答