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

我检查了你的代码。

但是您尝试执行此操作的方式是不可能的，因为父表采用 's最高行中所有<td>'s的累积宽度。<td>

因此，您的表格采用第一个的宽度<tr>。

要达到您的目标，您可以按照以下步骤操作 -

每个<tr>将仅包含一个<td>.
这<td>将包含 另一个表。 即在给定表<td>的第一个<tr>中，您应该编写包含当前给定表的第一行的表的代码。
在给定表<td>的第二个<tr>中，您必须在当前表中容纳另一个具有 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

不要使用表格进行布局，而是使用浮动 div。
使用 Jquery 计算浏览器高度和浏览器宽度。（您需要在标签中包含“Jquery CQDN”脚本引用
将容器的高度和宽度设置为屏幕总高度和宽度的百分比或容器 div 的百分比（然后变得更复杂，但对于复杂的布局更通用）
重要的！不要在 CSS 中为您使用 jquery 调整大小的任何元素设置高度和宽度！这只会把事情搞得一团糟
但是，您可以使用 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>

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

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

}

删除宽度：200px；图像尺寸大于 TD 的尺寸，因此它会从屏幕上消失

score 0 · Accepted Answer

您可以使用带有基于百分比填充的包装元素来设置所需的纵横比，然后在该包装器内以基于百分比的宽度/高度定位图像。然后，您可以决定是否需要基于百分比的装订线尺寸或固定装订线尺寸。我在父级上使用固定的装订线和负边距对其进行编码以否定该装订线，使用 box-sizing 轻松将其拆分为网格，但您可以通过更精确的左侧/顶部来简化它并获得相同的结果考虑排水沟的位置和宽度。如果您知道您的目标浏览器具有该功能，您还可以使用 :nth-child 选择器替换图像的 ID 属性。

我在这里包含了一个 JS Fiddle，它也显示了一个工作示例：http: //jsfiddle.net/xbafy/

HTML：

<div id="image_grid">
    <img src="" id="i1" />
    <img src="" id="i2" />
    <img src="" id="i3" />
    <img src="" id="i4" />
    <img src="" id="i5" />
</div>

CSS：

#image_grid {
    position: relative;
    height: 1px; /* To prevent IE from not adding margins to 0px height elements */
    padding-top: 40%; /* Whatever % you want to use to set the aspect ratio properly */
    margin: -10px; /* Used to negate our border added below so that images run to edges */
}

#image_grid img {
    position: absolute;
    border: 10px solid #fff; /* Used to create a hard non-flexible gutter between images, use padding if youd rather, and use % if you still want it flexible based on size */
    box-sizing: border-box;
}

#i1 {
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
}

#i2, #i3, #i4 {
    left: 50%;
    width: 20%;
    height: 33.33%;
}
#i2 { top: 0; }
#i3 { top: 33.33%; }
#i4 { top: 66.66%; }

#i5 {
    top: 0;
    left: 70%;
    width: 30%;
    height: 100%;
}

score 0 · Accepted Answer

您可以尝试在 CSS 中使用媒体查询。看起来您正在使用表格来布置页面。我强烈建议您不要这样做，原因如下：

1) 十多年来，这是一种不好的做法，并且会让任何查看代码的人觉得您的网站不专业。

2) 不灵活。您的网站布局不能以这种方式轻松更改/重新排列，而如果您在 div 中构建并使用 CSS 进行布局，那么将来更新将非常容易。

3) 虽然一开始可能看起来并不像，但使用 div 和 CSS 实际上是一种更简单的方法。你最终会用这种方式编写更少的代码。请记住，一个内容块的正确方式只是一个元素（但表格方式至少需要 3 () 并且如果您忽略了“tbody”标签，那么您真的不应该这样做。

html - 按比例增加/减少包装

8 回答 8

Related

Reference