根据高度保持div纵横比

Posted 2023-03-05

【中文标题】根据高度保持div纵横比

【英文标题】：Maintain div aspect ratio according to height

【发布时间】：2014-12-13 19:49:47

【问题描述】：

我需要将元素的 width 保持为其 height 的百分比。所以随着高度的变化，宽度也会随之更新。

相反的情况可以通过对 padding-top 使用 % 值来实现，但 padding-left 作为百分比将是对象宽度的百分比，而不是其高度。

所以用这样的标记：

<div class="box">
  <div class="inner"></div>
</div>

我想用这样的东西：

.box 
    position: absolute;
    margin-top: 50%;
    bottom: 0;

.inner 
    padding-left: 200%;

确保盒子的纵横比根据其高度保持。高度是可变的，因为它的 % 边距 - 随着窗口高度的变化，框的高度也会发生变化。

我知道如何使用 javascript 实现这一点，只是想知道是否有一个干净的纯 CSS 解决方案？

【问题讨论】：

看看这是否有帮助：mademyday.de/css-height-equals-width-with-pure-css.html

还有一个可能有用的“如此”的答案：height-equal-to-dynamic-width-css-fluid-layout。还有：css-only-proportional-resizing-of-elements

Sizing width of an element as a percentage of its height or vice versa in a fluid design?的可能重复

谢谢 - 我确实发现了那些类似的问题，但有些人以错误的方式引用了比率，无论如何没有一个答案有帮助。我认为提出一个仅与宽度占高度百分比有关的更具体的问题会很有用。

【参考方案1】：

您可以使用具有所需比例的图像来帮助按比例调整大小（可以通过将一个维度设置为某个值而将其他维度设置为自动来按比例缩放图像）。图片不必是可见的，但它必须占据空间。

.box 
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;

.size-helper 
  display: block;
  width: auto;
  height: 100%;

.inner 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 153, .8);

<div class="box">
  <img class="size-helper" src="//dummyimage.com/200x100/999/000"  >
  <div class="inner">
    1. box has fluid height<br>
    2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>
    2.1 it thus maintains width = 200% of height<br>
    2.2 it defines the dimensions of the box<br>
    3. inner expands as much as box
  </div>
</div>

在上面的例子中，box、inner 和 helper 的大小都是一样的。

【讨论】：

加载图像对于这种有趣的情况来说很好。当视口变大时，我使用了相同大小的 spacer.gifs、响应式 css 和各种大小的图像进行背景交换。它快速有效。

哇 - 很棒的解决方案，谢谢！我总是避免添加不必要的标记，但这个要求非常重要，在这种情况下值得。标记为答案。

在运行时更改 div.box 的高度时，Chrome 56 中的宽度不会相应更改。

需要注意的是，上面的演示在调整页面大小时在 Edge/IE 中不起作用——仅在刷新时。

可以将 img 元素替换为 <canvas width="1" height="1"></canvas> 或任何尺寸

【参考方案2】：

您可以对元素的高度和宽度使用 vh 单位，以便它们都根据视口高度而变化。

vh 视口高度的 1/100。 (MDN)

DEMO

.box 
    position: absolute;
    height:50vh;
    width:100vh;
    bottom: 0;
    background:teal;

<div class="box"></div>

【讨论】：

不错！这很聪明！这不完全是问题，但可能是解决方案。

我不确定这是否能回答问题。 OP 明确指出maintain the width of an element as a percentage of its height 不是视口的高度。

@HashemQolami 是的，这仅在元素的高度根据视口高度设置时才有效。但我不知道有任何其他 css 解决方案可以做到这一点。

【参考方案3】：

您编写的 CSS 技巧可以很好地保持元素上的比率 width / height。 它基于padding 属性，当其值为百分比时，它与父宽度成正比，即使对于padding-top 和padding-bottom 也是如此。

没有任何 CSS 属性可以设置与父级高度成比例的水平尺寸。 所以我认为没有干净的 CSS 解决方案。

【参考方案4】：

还有另一种更有效的方法可以根据高度实现恒定的纵横比。

您可以放置​​一个空的 svg，这样您就不必加载外部图像。

HTML 代码：

    <svg xmlns="http://www.w3.org/2000/svg"
      
      
      class='placeholder-svg'
    />

CSS 代码：

.placeholder-svg 
  width: auto;
  height: 100%;

更改宽度/高度以实现所需的纵横比。

请记住，svg 可能会溢出。

http://www.w3.org/2000/svg 只是一个命名空间。它不加载任何内容。

如果您将placeholder-svg 类更改为：

.placeholder-svg 
  width: 100%;
  height: auto;

然后根据宽度调整高度。

Demo 1宽度根据高度和2:1纵横比调整。

Demo 2 与上面相同，但您可以轻松调整大小（使用 React）

【讨论】：

像魅力一样工作！正是我需要的，因为我在 div 上使用背景图像，并且此解决方案可以双向工作（与 padding-top: 100% 选项不同）。

很好的解决方案，但是高度不能是一个百分比值。

美丽的解决方案

【参考方案5】：

自 2021 年起，有一个名为 aspect-ratio 的新属性。 Most browsers already support it

div 
    border: 1px solid;
    margin: 8px;


.box 
    width: 100px;
    min-height: 100px;
    resize: horizontal;
    overflow: auto;


.inner1 
    aspect-ratio: 1/1;


.inner2 
    aspect-ratio: 3/1;

<div class="box">
  <div class="inner1"></div>
  <div class="inner2"></div>
</div>

运行这个 sn-p 并手动调整外部 div 的大小以查看内部 div 的行为

【参考方案6】：

我找不到纯 CSS 解决方案。这是使用CSS Element Queries JavaScript 库的解决方案。

var aspectRatio = 16/9;
var element = document.querySelector('.center');
function update() 
  element.style.width = (element.clientHeight * aspectRatio) + 'px';


new ResizeSensor(element, update);
update();

CodePen demo!