如何在保持宽高比的同时使用CSS自动调整DIV大小？-Java 学习之路

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

但我想要做的只是使用“宽度”和“高度”变量为该DIV指定宽高比，然后将该DIV自动调整为其内部容器的100％，但同时保持相同的宽高比 .

Example: 用户选择宽度4和高度2，然后发送表格 . 在接收PHP页面上，DIV（接收宽度和高度比率的那个）位于容量为1000px宽度和600px高度的容器内 . 所以现在，DIV调整到1000px宽和500px高（这将是4到2的宽高比）

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

亚伦

2 回答

由于 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>

回复于 2024-04-29T06:50:00+08:00

您可以利用替换元素可能具有固有宽高比的事实 . 根据spec，

否则，如果'height'的计算值为'auto'，并且元素具有固有比率，则'height'的使用值为:(使用的宽度）/（固有比率）

因此，你可以

使用所需的固有比率创建替换元素，然后将 width:100% 设置为它 .
使用绝对定位从元素的正常流动中移除所有内容，以防止它们增加高度 . 然后，让它长大以填充容器 .

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

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

在下面的代码片段中，我使用2px width and 1px height image（
enter image description here
）：

.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>

回复于 2024-04-29T06:50:00+08:00

如何在保持宽高比的同时使用CSS自动调整DIV大小？

2 回答

相关问题