如何在保持纵横比的情况下使用CSS自动调整DIV大小？ [英] How to Auto-Resize a DIV with CSS while keeping Aspect Ratio?

问题描述

我有一个标准的HTML格式，允许用户选择宽度选项和高度选项（每个值的范围从1到10）。当他们发送表单时，它将它发送到PHP / HTML页面，PHP抓取Width和Height变量并将其分配给DIV的宽度和高度。

What I have is a standard form in HTML that allows the user to select a "Width" option and a "Height" option (each with values ranging from 1 to 10). When they send the form, it sends it to a PHP/HTML page where PHP grabs the "Width" and "Height" variables and assigns it to a width and height of a DIV.

但是我想做的只是使用宽度和高度变量来指定一个宽高比DIV，然后让DIV自动调整大小到100％的容器内，但保持相同的宽高比。

But what I'm trying to do is just use the "Width" and "Height" variables to assign an aspect ratio to that DIV, and then have that DIV auto-resize to 100% of the container it is inside, but while keeping that same aspect ratio.

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

Example: User selects a Width of 4 and a Height of 2, then sends the form. On the receiving PHP page, that DIV (the one receiving the width and height ratios) is inside a container that's 1000px width and 600px height. So now, that DIV resizes to 1000px wide and 500px tall (that would be the aspect ratio of 4 to 2)

任何想法，代码，脚本将是非常有用的，非常感谢！

Any ideas, codes, scripts would be extremely helpful, thank you very much!

Aaron

推荐答案

padding - * 属性是根据生成的框的包含块的宽度计算的，您可以：

Since percentage values of the padding-* properties are calculated with respect to the width of the generated box's containing block, you could:

• 添加一个没有内容但在垂直填充中有百分比的虚拟元素（ padding-top 或 padding-bottom ），对应于所需的宽高比。


• 使用绝对定位从元素的正常流程中删除所有内容，以防止它们增加高度。

• Add a dummy element with no content but with a percentage in a vertical padding (padding-top or padding-bottom), corresponding to the desired aspect ratio.
• Use absolutely positioning to remove all contents from the normal flow of the element, in order to prevent them from increasing the height. Then, make it grow to fill the container.

这个想法来源于 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>

可以使用垂直边距而不是垂直填充，但是随后会出现边缘崩溃。要阻止它，请添加

Note vertical margin could be used instead of vertical padding, but then there would be margin collapse. To prevent it, add

#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 伪元素之前，不需要使用虚拟元素：

Using ::before pseudo element, there's no need to use a dummy element:

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

这篇关于如何在保持纵横比的情况下使用CSS自动调整DIV大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！