html - ラッパーを比例的に増減します

Question

html...

<div id="main">
    <table>
        <tr>
            <td><img src="" width="200" height="100" /></td>
            <td>
                <img src="" width="50" height="30" />
                <img src="" width="50" height="30" />
                <img src="" width="50" height="30" />
            </td>
            <td><img src="" width="100" height="100" /></td>
        </tr>
        <tr>
            <td style="color: blue; background-color: yellow;">some text here</td>
            <td colspan=2 style="color: white; background-color: blue;">next goes here</td>
        </tr>
    </table>
</div>

CSS...

img{
    background-color: red;
    display: block;
    border: 2px solid white;
}

私が試したこと：

#main table{
    width: 200px;
    display: table;
    table-layout: fixed;
}

デモ

私が欲しいものはここにあります：

オリジナルサイズ：

ここに画像の説明を入力

メインのサイズを変更すると:

ここに画像の説明を入力

score 2 · Accepted Answer

たとえば、ズームプロパティを使用します。

#main table{
    width: 300px;
    display: table;
    table-layout: fixed;
    zoom: 0.4;    
 }

score 1 · Accepted Answer

あなたのコードを確認しました。

しかし、これを行おうとしている方法は不可能です。なぜなら、親テーブルは、行内のすべての<td>の累積幅を取得し、の数が最も多いから<td>です。

したがって、テーブルの幅は最初の<tr>.

目標を達成するには、次の手順に従うことができます-

それぞれ<tr>に 1 つだけが含まれます<td>。
これには<td> 別のテーブル が含まれます。つまり、指定されたテーブルの最初の行<td>には、現在の指定されたテーブルの最初の行を含むテーブルのコードを記述する必要があります<tr>。
指定されたテーブルの<td>2 番目<tr>のテーブルでは、現在のテーブルに 2 番目の 2 がある別のテーブルに対応する必要があり<td><tr>ます。

新しいデモまたは次のHTMLコードを確認してください。

<div id="main">
<table>
    <tr>
        <td>
            <table width=100% style="overflow-x:hidden">
                <tr>
                    <td>
                        <img src="" width="200" height="100" />
                    </td>
                    <td>
                        <img src="" width="50" height="30" />
                        <img src="" width="50" height="30" />
                        <img src="" width="50" height="30" />
                    </td>
                    <td>
                        <img src="" width="100" height="100" />
                    </td>
                </tr>
            </table>
    </tr>
    <tr>
        <td>
            <table width=100%>
                <tr>
                    <td style="color: blue; background-color: yellow;">some text here</td>
                    <td style="color: white; background-color: blue;">next goes here</td>
                </tr>
            </table>
    </tr>
</table>

CSS コードの変更は不要です。

出力は次のようになります-

score 1 · Accepted Answer

既に述べたように、%s で遊んでください。ここに例を示します。

<div id="main">
    <table>
        <tr>
            <td><img src="" width="100%" height="100%" /></td>
            <td>
                <img src="" width="100%" height="30%" />
                <img src="" width="100%" height="30%" />
                <img src="" width="100%" height="30%" />
            </td>
            <td><img src="" width="100" height="100" /></td>
        </tr>
    </table>
</div>

http://jsfiddle.net/pUnsA/2/

score 0 · Accepted Answer

#main table{
 display: table;
table-layout: fixed;

}

幅を削除します:200px; 画像サイズが TD よりも大きいため、画面からはみ出します

score 0 · Accepted Answer

更新されたフィドル " http://jsfiddle.net/XUeAV/ "を見つけてください

<table width="100%">
        <tbody><tr>
            <td width="55%" height=""><img width="" height="100" style="" src=""></td>

#main の幅の変更に対応したい場合は、テーブルの幅を % で定義する必要があります

score 0 · Accepted Answer

レイアウトにテーブルを使用しないでください。代わりにフローティング div を使用してください。
Jquery を使用して、ブラウザの高さとブラウザの幅を計算します。(タグに「Jquery CQDN」スクリプト参照を含める必要があります
コンテナーの高さと幅を、画面の高さと幅の合計のパーセンテージ、またはコンテナー div のパーセンテージのいずれかで設定します (その場合はより複雑になりますが、複雑なレイアウトにはより汎用性があります)。
重要！jquery でサイズ変更する要素の CSS で高さと幅を設定しないでください。これは物事を混乱させるだけです
ただし、Min-Width 値と Min-Height 値を使用して、設定したい制限/制約を超えてコンテナが縮小するのを防ぐことができます

このようにすると、さまざまなブラウザー用に html を微調整する必要がなくなります。プロの結果のために私のために働きます。

Javascript: document.ready ブロックのビットは、ユーザーがブラウザーウィンドウのサイズを変更すると、ページ全体のサイズを自動的に変更します。

これが実用的な解決策です!.. (コピーして貼り付けて試してみてください)

<html>
<head>
    <script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    <style>
        html{float:left; padding:0px; margin:0px;  background-color:red;}/* /w/h Handled by Javascript*/
        body{float:left; padding:0px; margin:0px;  background-color:orange; font-size:11px; font-family:Verdana; }/* /w/h Handled by Javascript*/
        div.ContentContainer{float:left; margin:0px; padding:0px; background-color:yellow; } /* /w/h Handled by Javascript*/
        div.SiteInfoContainer{float:left; padding:0px; margin:0px; background-color:green;  color:White; }/* /w/h Handled by Javascript*/
        div.SiteDetailContainer{float:left; padding:0px; margin:0px; background-color:blue; color:White; }/* /w/h Handled by Javascript*/
    </style>
</head>
<body>
      <div class="ContentContainer">
        <div class="SiteInfoContainer">25% Wide, 100% high</div>
        <div class="SiteDetailContainer">75% wide, 100% high</div>
      </div>

<script type="text/javascript">
        function MasterContentFullHeight() {

            var TotalWinHeight = $(window).height();
            var TotalWinWidth = $(window).width();

            $("html").css('height', TotalWinHeight);
            $("html").css('width', TotalWinWidth);

            $("body").css('height', TotalWinHeight);
            $("body").css('width', TotalWinWidth);

            $(".ContentContainer").css('height', TotalWinHeight);
            $(".ContentContainer").css('width', TotalWinWidth);

            $(".SiteInfoContainer").css('width', ((TotalWinWidth/ 100) * 25));
            $(".SiteInfoContainer").css('height', TotalWinHeight);

            $(".SiteDetailContainer").css('width', ((TotalWinWidth / 100) * 75));
            $(".SiteDetailContainer").css('height', TotalWinHeight);

        }

           $(document).ready(function() {
                MasterContentFullHeight();
                $(window).bind('resize', MasterContentFullHeight);
           });
    </script>


</body>
</html>

html - ラッパーを比例的に増減します

8 に答える 8

Related

Reference