按比例缩小类似于响应式图像的DIV？

Question

这可能是一个愚蠢的问题......但在CSS中,"响应式图像"通常是这样的:

img {
  max-width: 100%;
  height: auto;
}

是否可以使用div(或一系列嵌套的div)而不是一个行为与响应图像相同的图像？您需要定义宽度为1000px且高度为200px的div,但随着容器宽度的缩小,它会按比例收缩.

从本质上讲,是否有可能做出这样的事情:

http://codepen.io/jakobud/pen/jEKVRZ

表现得像这样:

http://codepen.io/jakobud/pen/MYXbZB

这有可能吗？如果没有,为什么？你显然无法添加height: auto到div.two因为那将覆盖DIV定义的高度.

我考虑过这种方法的一个解决方法是创建一个1000x200完全透明的PNG,您可以将其置于容器中,这将产生所需的结果,但这是一个完全黑客攻击.好像你应该能够用CSS做到但我不确定如何.

此外,我正在寻找一个不需要jQuery的解决方案.

我要求这样做的原因有时候设计师已经要求这样的东西,其中有一个容器,其大小具有一定的宽高比,但没有使用背景图像.在某些情况下,设计人员想要使用CSS渐变作为背景,因此我不能只使用<img>容器的纵横比.显然,我不能依赖于内容(a <h1>或某物)来决定容器形状/纵横比.

Answer 1

divs本身并没有像图像那样的宽高比,但是你可以在带有绝对定位子的包装div上使用填充来模拟宽高比.这是处理响应式视频的常用方法.

.one {
  position: relative;
  padding-bottom: 20%; /* 1000:200 */
  height: 0;
}

.two {
  width: 1000px;
  height: 200px;
  background: #999;
  color: #FFF;
  text-align: center;
  font-family: sans-serif;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

更新了codepen:http://codepen.io/sdsanders/pen/zxaNGQ