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

アダプティブ テーブル ディメンションは扱いにくい場合があります。最初にお勧めするのは、テーブルを div の中に属性 as を付けて配置し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 を に設定する<table cellspacing="0" cellpadding="0">と、正確な寸法を取得するのがずっと簡単になり、最初から「明確な状態」になります。

また、属性のみを設定した場合、img タグは常に縦横比を尊重しwidthます。

このために、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

I suggest you to try with this css code:

img{ width: 49%;  }

http://jsfiddle.net/xeSLA/

于 2013-01-28T18:41:14.353 に答える