7

我所拥有的是 HTML 中的标准表单，它允许用户选择“宽度”选项和“高度”选项（每个选项的值范围为 1 到 10）。当他们发送表单时，它会将其发送到 PHP/HTML 页面，其中 PHP 获取“Width”和“Height”变量并将其分配给 DIV 的宽度和高度。

但我想要做的只是使用“宽度”和“高度”变量为该 DIV 分配一个纵横比，然后让该 DIV 自动调整到它所在容器的 100%，但同时保持相同的纵横比。

示例： 用户选择 4 的宽度和 2 的高度，然后发送表单。在接收 PHP 页面上，该 DIV（接收宽度和高度比的那个）位于 1000 像素宽度和 600 像素高度的容器内。所以现在，该 DIV 调整为 1000px 宽和 500px 高（这将是 4 到 2 的纵横比）

任何想法、代码、脚本都会非常有帮助，非常感谢！

亚伦

4

2 回答 2

8

由于padding-*属性的百分比值是根据生成框的包含块的宽度计算的，因此您可以：

  • padding-top添加一个没有内容但在垂直填充（或）中具有百分比的虚拟元素padding-bottom，对应于所需的纵横比。
  • 使用绝对定位从元素的正常流动中移除所有内容，以防止它们增加高度。然后，让它长到装满容器。

这个想法取自http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio

#container {
  position: relative;
  width: 50%;
}
#dummy {
  padding-top: 75%; /* 4:3 aspect ratio */
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

请注意，可以使用垂直边距代替垂直填充，但是会出现边距折叠。为了防止它，添加

#container {
  display: inline-block;
}


#container {
  display: inline-block;
  position: relative;
  width: 50%;
}
#dummy {
  margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}
<div id="container">
  <div id="dummy"></div>
  <div id="element">
    some text
  </div>
</div>

使用::before伪元素，无需使用虚拟元素：

#container:before {
  padding-top: 75%; /* 4:3 aspect ratio */
  content: ''; /* Enable the pseudo-element */
  display: block;    
}


#container {
  position: relative;
  width: 50%;
}
#container:before {
  padding-top: 75%; /* 4:3 aspect ratio */
  content: ''; /* Enable the pseudo-element */
  display: block;    
}
#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver;
}
<div id="container">
  <div id="element">
    some text
  </div>
</div>

于 2012-08-29T14:52:21.313 回答
1

您可以利用替换元素可能具有固有纵横比的事实。根据规范，

否则，如果 'height' 的计算值为 'auto'，并且元素具有固有比率，则使用的 'height' 值为：

(使用宽度) / (内在比率)

因此，您可以

  • 创建具有所需内在比率的替换元素，然后设置width:100%为它。
  • 使用绝对定位从元素的正常流动中移除所有内容，以防止它们增加高度。然后，让它长到装满容器。

然后，容器容器将具有您想要的纵横比。

被替换的元素可以是图像。您可以在 PHP 中创建所需纵横比的图像，或使用第三方 Web 服务，如http://placehold.it/

在下面的代码片段中，我使用了2px 宽和 1px 高的图像 ( 在此处输入图像描述)：

.container {
  border: 3px solid blue;
  position: relative;
}
.container > img {
  width: 100%;
  display: block;
  visibility: hidden;
}
.container > .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
<div class="container">
  <img src="http://i.stack.imgur.com/Lfmr6.png" />
  <div class="content">
    <p>01</p><p>02</p><p>03</p><p>04</p><p>05</p>
    <p>06</p><p>07</p><p>08</p><p>09</p><p>10</p>
    <p>11</p><p>12</p><p>13</p><p>14</p><p>15</p>
    <p>16</p><p>17</p><p>18</p><p>19</p><p>20</p>
  </div>
</div>

您还可以使用<canvas>元素而不是图像。这样您就不需要创建图像，但它不适用于旧浏览器（如 IE 8 和更早版本）：

<div class="container">
  <canvas height="1" width="2"></canvas>
  <div class="content">...</div>
</div>


.container {
  border: 3px solid blue;
  position: relative;
}
.container > canvas {
  width: 100%;
  display: block;
  visibility: hidden;
}
.container > .content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}
<div class="container">
  <canvas height="1" width="2"></canvas>
  <div class="content">
    <p>01</p><p>02</p><p>03</p><p>04</p><p>05</p>
    <p>06</p><p>07</p><p>08</p><p>09</p><p>10</p>
    <p>11</p><p>12</p><p>13</p><p>14</p><p>15</p>
    <p>16</p><p>17</p><p>18</p><p>19</p><p>20</p>
  </div>
</div>

于 2012-08-29T03:00:02.040 回答