CSS:相对于宽度保持div的高度

Question

我的问题与这个问题非常相似:CSS:100%的宽度或高度,同时保持纵横比？

我有一个div,其位置是固定的.div 的宽度必须为100%,高度恰好是宽度的 1/6 .是否有-webkit-calc()这样做的方法？

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

Answer 1

这就是你追求的吗？我根本就没用-webkit-calc().我已经插入一个1px由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显示请求的行为.

Answer 2

您还可以使用我在响应式方柱中描述的解决方案.

它基于以下事实:%padding-top/bottom和margin-top/bottom是根据父元素的宽度计算的.

根据您的情况,它看起来像这样:

小提琴

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;
}