Question

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

代码：

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

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>

Answer 2

只需将对方变换添加到父亲的孩子：

＆＃13;

    .parent {
      width: 200px;
      height: 200px;
      transform-origin: 0% 0;
      margin: 50px;
      border: 1px black solid;
    }

    .parent:hover {
      transform: scaleY(2.0);
    }
    
    .parent:hover img {
      transform: scaleY(0.5);
    }

    img {
      width: 100%;
      border: 1px black solid
    }

＆＃13;

    <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>

＆＃13;

Answer 3

首先不要缩放容器div缩放图像，为什么要使用scaleY 当你想缩放图像时，请看：

另外，请务必添加一些transition以创建缩放效果

＆＃13;

.parent {
  width: 200px;
  height: 200px;
  transform-origin: top;
  margin: 50px;
  border: 1px black solid;
  overflow:hidden;
}

.parent:hover img{
  transform: scale(2.0);
  transition:all 1s ease-out;
}

img {
  width: 100%;
  border: 1px black solid;
  transition:all 1s ease-out;
}

＆＃13;

<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>

＆＃13;

只是缩放div，而不是它里面的内容

3 个答案: