如何强制响应元素保持其宽高比

Question

我的响应div包含大量文本，宽度与容器相同。

<div>This is a long string of text, but the real text will be a lot longer.</div>

如何强制div保留高度为其宽度的50％，并停止内容溢出边界仅使用HTML和CSS ？

看起来应该是这样的

这个

Answer 1

什么是CSS填充技巧？

首先提供一些有关包含块的信息以供参考。

  

<强> 9.1.2 Containing blocks
  通常，生成的框用作包含后代框的块;我们说一个盒子＆＃34;建立＆＃34;它的后代的包含块。 短语＆＃34;一个包含块＆＃34;意味着＆＃34;盒子所在的容纳块，＆＃34;而不是它产生的那个。

现在，这就是诀窍。

  

<强> Padding
  * 百分比：参考包含块的宽度

直观的是，水平填充百分比将引用包含块的宽度。但是，垂直填充百分比也指宽度，而不是高度。

这对维持宽高比意味着什么？

这意味着如果你有一个与其父元素宽度相同的元素，并设置padding-bottom: 50%，那么该元素的宽度将是它的一半。

<div style="padding-bottom: 50%;"></div>

但是，如果元素小于其父元素的整个宽度，因为padding属性引用父元素宽度，数字将更改。

例如，如果元素是其父元素宽度的一半，并且您设置了padding-bottom: 50%，则它将与它的宽度一样高。

<div style="width: 50%; padding-bottom: 50%;"></div>

这是因为padding属性的百分比是相对于包含块而不是元素。

要使一个父母宽度的一半的元素保持2：1的宽高比（宽度的一半），将百分比减半。

<div style="width: 50%; padding-bottom: 25%;"></div>

我如何在现实世界中使用它？

如果相关元素包含占用文档流中空间的任何内容，则高度将发生变化。为了避免这种情况，你可以利用另一个CSS技巧。

  

<强> 10.1 Definition of "containing block"
  4.如果元素的位置为：absolute＆＃39;，则包含的块由最近的祖先建立，其位置为＆＃39;绝对的＆＃39;，＆＃39;亲戚＆＃39;或者以下列方式修复＆＃39;

     

  

• 在祖先是内联元素的情况下，包含块是为该元素生成的第一个和最后一个内联框的填充框周围的边界框。在CSS 2.1中，如果内联元素被分割为多行，则包含的块是未定义的。

  

• 否则，包含块由祖先的填充边缘形成。

  

当一个元素设置为position: absolute时，它将被定位为引用其最近的祖先position: absolute，position: relative或position: fixed。如果元素没有这样的祖先，它将定位于对根元素的引用。

这意味着，如果您在此新响应position: relative上设置div，则可以插入一个position: absolute的子项，并使用{{1}将其与父项相同}}。

确保内容不会溢出设置top: 0; width: 100%; bottom: 0;

的边界

overflow: auto

这将创建一个元素，该元素保留其宽高比，并且可以包含内容而不改变宽高比。

<div style="position: absolute; top: 0; width: 100%; bottom: 0; overflow: auto;"></div>

<强> See it in action!

Answer 2

还有另一种方法可以执行此效果。您可以使用Viewport Units：

Updated JsFiddle

<div style="height: 50vw; position: relative;">

使用vw，您可以根据视口的宽度将元素的高度设置为百分比。

<强> 缺点：

此解决方案仅适用于您的布局取决于窗口的尺寸，因为视口单元的结果将始终根据窗口的大小而变化。

因此，如果您使用它，请务必将width和height都设置为所需的百分比值。