html - 只缩放 div，而不缩放里面的内容

Question

正如您在代码中看到的那样，我有一个 div 和一个图像。我想在不更改图像大小的情况下缩放 div。我该怎么做？ http://jsfiddle.net/8n96x8wx/22/

代码:

.parent {
  width: 200px;
  height: 200px;
  transform-origin: top;
  margin: 50px;
  border: 1px black solid;
}

.parent:hover {
  transform: scaleY(2.0);
}

img {
  width: 100%;
  border: 1px black solid
}

<div class="parent">
  <img src="https://cdn.shopify.com/s/files/1/1347/6161/products/dankMemes-2_819e8d98-5746-47bd-90fd-063fae1c7d06_1024x1024_crop_bottom.progressive.jpg?v=1497447755">
</div>

Answer 1

在这种情况下，我宁愿建议您将 transition 属性与加倍的 height 一起使用:

.parent {
  width: 200px;
  height: 200px;
  transform-origin: top;
  margin: 50px;
  border: 1px black solid;
}

.parent:hover {
  transition: height;
  height: 400px;
}

img {
  width: 100%;
  border: 1px black solid;
  box-sizing: border-box;
}

<div class="parent">
  <img src="https://cdn.shopify.com/s/files/1/1347/6161/products/dankMemes-2_819e8d98-5746-47bd-90fd-063fae1c7d06_1024x1024_crop_bottom.progressive.jpg?v=1497447755">
</div>