2

画像のグリッド (7x7 テーブル) があります。そのテーブル/グリッドを、モニターの表示サイズに応じて調整される流動的なサイズの div に自動調整したいと考えています。テーブルがdivの境界を超えて拡大せず、幅も高さも大きくならないようにしたいのですが、各テーブルセルを他のすべてのテーブルセルと同じ高さと幅に保ちながら、最大の領域を占有します。

これは、私の説明からは想像しにくいかもしれません。基本的に、すべての表のセルは強制的に正確な正方形 (同じ幅/高さ) にする必要がありますが、そのサイズは表示サイズの大きさに応じて拡大または縮小する可能性があります。また、テーブルのいずれも、その div の表示画面領域の外に出てはなりません。

width: 100% .. を強制するのは簡単ですが、高さが大きすぎる可能性があります。これをcssでやりたいのですが、うまくいくものなら何でも構いません。何か案は？

4

1 に答える 1

0

そのため、テーブル グリッドに画像を配置し、常に収まるようにウィンドウのサイズ変更に対応させたいと考えています。

マークアップ (この例では、私のグリッドは 3x3 ですが、7x7 でも同じように機能します。データ セルと行を追加するだけです)。

<div id="wrapper">
    <table>
        <tr>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
        </tr>
        <tr>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
           <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
        </tr>
        <tr>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
            <td><img src="http://farm7.staticflickr.com/6115/6249486517_884b897248_o.jpg"></td>
        </tr>
    </table>
</div>

CSS:

#wrapper{width: 100%;}

#wrapper table {width: 100%;}

#wrapper table tr td {width: 33%;}

#wrapper table tr td img {width: 100%;}

Flickr からのランダムな画像を使用しました。

それが役に立てば幸い。

于 2012-11-03T22:45:54.237 に答える