如何使用translate css属性获得较小的底部？

Question

使用translate css函数时遇到问题。

我的HTML如下所示。

<div class="outer-div">
  <img src="https://www.visioncritical.com/wp-content/uploads/2014/12/BLG_Andrew-G.-River-Sample_09.13.12.png"/>
  <div class="inner-div">
    Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum Loreum Ipsum

  </div>
</div>

你会注意到我有一个外部div，它有一个图像和一个带有内容的内部div。我使用translate CSS属性将负y轴的内部div推动40px。我正在使用下面的示例css：

.outer-div {
  background-color: blue;
  width: 400px;
  height: auto;
}

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

.inner-div {
  background-color: red;
  width: auto;
  height: 200px;
  transform: translate(0, -40px);
}

然而，通过这样做，我现在在div的底部有一个40px的间隙。我想保持仅20px的差距，如附图所示。

我怎样才能在底部只有20px？我还创建了一个示例代码笔（http://codepen.io/hellouniverse/pen/XNyzZX）来显示问题

Answer 1

试试这个css：

.outer-div {
  background-color: blue;
  max-width: 400px;
  height: 445px;
}

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

.inner-div {
  background-color: red;
  width: auto;
  height: 200px;
  transform: translate(0, -40px);
}

Answer 2

使用此转换属性生成20px到40px：

transform: scaleY(2);

scaleY指定高度，（2）乘以给定高度＆＃34; 20px＆＃34;至40px。