CSS：保持div的高度相对于其宽度[重复]

Posted 2023-03-05

【中文标题】CSS：保持div的高度相对于其宽度[重复]

【英文标题】：CSS: Keeping a div's height relative to its width [duplicate]

【发布时间】：2013-05-08 12:12:34

【问题描述】：

我的问题和这个问题很相似：CSS: 100% width or height while keeping aspect ratio?

我有一个位置固定的 div。 div 的 width 必须是 100%，并且它的 height 正好是它的 width 的 1/6。有 -webkit-calc() 方法吗？

注意： JS 解决方案不是首选，因为缩放/方向更改会影响宽度/高度。

【问题讨论】：

感谢您的解决方案。我个人无法重新测试它，因为我在一年前遇到了这个问题并且已经失去了上下文。也许下一个遇到此问题的人会尝试您的解决方案。 :)

【参考方案1】：

这就是你所追求的吗？我根本没有使用-webkit-calc()。我已将1px by 6px 图像插入到外部div 中，该图像已应用position: fixed，并将图像设置为具有width 的100% 和position: relative。然后我添加了一个内部div，它绝对定位为与其祖先一样高和宽。

现在您可以更改外部div 的宽度，并且图像的width: 100% 设置将确保外部和内部div 的高度始终等于1/6它们的宽度（或至少尽可能接近完全相等，高度将四舍五入到最接近的像素整数）。任何内容都可以进入内部div。

HTML

<div>
  <div></div>
  <img src="https://dl.dropboxusercontent.com/u/6928212/sixbyone.png" />
</div>

CSS

html, body 
  margin: 0px;
  padding: 0px;

div 
  position: fixed;
  width: 100%;

div > div 
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;      

img 
  width: 100%;
  display: block;      
  position: relative;

这是一个 jsFiddle 显示请求的行为。

【讨论】：

+1 非常好的创意解决方案！

【参考方案2】：

您也可以使用我在Responsive square columns中描述的解决方案。

基于%padding-top/bottom和margin-top/bottom是根据父元素的宽度计算出来的。

适应你的情况，它看起来像这样：

FIDDLE

HTML：

<div class="wrap">
    <div class="content">
    </div>
</div>

CSS：

.wrap
    position:fixed;
    width:100%;
    padding-bottom:16.666%; /*  100x1/6 = 16.666...*/

.content
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;

【参考方案3】：

你总是可以像这样设置 div 宽度：

$('#div1').css("width", $('#div1').height()/6);

编辑：

或者你可以使用这样的东西：

/* Firefox */
width: -moz-calc(100% / 6);
/* WebKit */
width: -webkit-calc(100% / 6);
/* Opera */
width: -o-calc(100% / 6);
/* Standard */
width: calc(100% / 6);

这只是一个例子-..但是不可能在css文件中以像素为单位获取div的高度..你需要使用jquery来实现

编辑：

高度是宽度的 1/6

$('#div1').css("height", window.width()/6);

【讨论】：

感谢您的回答，但这并不能解决我的问题。宽度：-webkit-calc(100% / 16.66666666667);宽度为 PARENTS WIDTH 的 1/6。我需要宽度的 1/6 的高度！ :) 还是谢谢

@Akshay 但你不能在 css 中做到这一点，你只能用 javascript 做到这一点

我正在阅读有关 webkit 计算的内容，想知道我们是否可以使用它来做到这一点..

检查我编辑的答案是否有用？

这一直是我最后的方法。原因是因为我的宽度是 100%，页面布局的任何变化（如方向变化）都不能保证我的高度是宽度的 1/6。当然我可以监听调整大小事件并处理它，但是如果有的话，一个 css 解决方案会减少工作量

【参考方案4】：

你可以使用 jquery，例如$('.someclass').css('width', 180); $('.someclass').css('height', $('.someclass').width() / 6);

为了便于阅读，从评论中移出了第二条建议

$('.btnResize').click(function()  $('.div').css('height', $('.div').width()/6););

【讨论】：

谢谢。不能解决问题。宽度需要为 100% 仅用于调整大小问题。因此，如果我通过 JS 固定高度一次，然后缩放或更改方向，则高度不会重置为宽度的 1/6。

对不起，我误会了，也许我还是这样；如果它只是调整大小的问题，那么必须有一个可以用 jquery 捕获的触发事件（参见修改后的示例）；如果它没有通过按钮调整大小，那么应该有另一个适当的事件来捕获