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

Question

这可能是一个愚蠢的问题......但在 CSS 中，“响应式图像”通常是这样的：

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

是否可以使用 div（或一系列嵌套的 div）来代替与响应式图像具有相同行为方式的图像？您需要定义一个宽度为 1000 像素、高度为 200 像素的 div，但随着容器宽度的缩小，它会按比例缩小。

基本上，有没有可能做这样的事情：

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

表现得像这样：

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

这有可能吗？如果不是，为什么？您显然不能将height: auto 添加到div.two，因为这会覆盖DIV 定义的高度。

我为这种方法考虑过的一种解决方法是创建一个 1000x200 完全透明的 PNG，然后将其放置在容器中，这会产生预期的结果，但它完全是一个 hack。似乎您应该能够使用 CSS 来做到这一点，但我不确定如何。

我也在寻找不需要 jQuery 的解决方案。

我要求这样做的原因是有时设计师会要求这样的东西，其中有一个具有特定纵横比大小的容器，但没有使用背景图像。在某些情况下，设计师希望使用 CSS 渐变作为背景，因此我不能只使用 <img> 即容器的纵横比。显然我不能依靠内容（<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%;
}

更新代码笔：http://codepen.io/sdsanders/pen/zxaNGQ