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>。显然，我不能依赖内容（<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%;
}

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

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

1 个答案: