html - 按比例缩小类似于响应图像的 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

div 本质上不像图像那样具有宽高比，但您可以在具有绝对定位子元素的包装器 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