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

Question

这可能是个愚蠢的问题...但在 CSS 中，"responsive image" 通常是这样的：

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> 或其他东西）来决定容器 shape/aspect 比率。

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

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

Proportionally shrink a DIV similar to a responsive image?

html

css

responsive-design