Question

由于我想使用各种图像，因此未使用特定数字设置图像的原始尺寸或父Div。

目标是悬停时的缩放效果。问题是，当图像转换（缩放）时，容器div将采用新的大小。那么我如何保留大小并应用溢出：隐藏，以便图像在父div的初始大小内放大？

HTML

<div class="time-line-box">
    <div class="imgmask">
        <img src="images/someimage.jpg" alt="">
    </div>

    <p>some text some text some text </p>
</div>
</div>

CSS

.imgmask img{
    transform: scale3d(1, 1, 1);
    transform-origin: 50% 50% 0;
    transition: transform 1s cubic-bezier(0.37, 0.23, 0.34, 0.99) 0s, opacity 0.22s ease-out 0s;
    width: 100%;
    overflow: hidden
}
.imgmask{
    overflow: hidden;
}
.imgmask:hover img{
    opacity: 0.95;
    transform: scale3d(1.2, 1.2, 1.2) !important;
    transition: transform 2.2s cubic-bezier(0.37, 0.23, 0.34, 0.99) 0s, opacity 0.22s ease-out 0s;
}

Answer 1

将图片width:100%更改为max-width:100%;

.imgmask img {
  transform: scale3d(1, 1, 1);
  transform-origin: 50% 50% 0;
  transition: transform 1s cubic-bezier(0.37, 0.23, 0.34, 0.99) 0s, opacity 0.22s ease-out 0s;
  max-width: 100%;
  overflow: hidden
}

.imgmask {
  overflow: hidden;
  border:1px solid red;
}

.imgmask:hover img {
  opacity: 0.95;
  transform: scale3d(1.2, 1.2, 1.2) !important;
  transition: transform 2.2s cubic-bezier(0.37, 0.23, 0.34, 0.99) 0s, opacity 0.22s ease-out 0s;
}

<div class="time-line-box">
  <div class="imgmask">
    <img src="http://www.placebacon.net/400/300" alt="">
  </div>

  <p>some text some text some text </p>
</div>

Answer 2

您必须设置div容器的大小。

加载页面后，在循环中为所有图像运行类似的逻辑。

function resize() {
    $('.parent-div').css({
        width: $(this).children('.child-img').width(),
        height: $(this).children('.child-img').height(),
    });
}

考虑到这是您的HTML。

<div class="time-line-box">
    <div class="imgmask parent-div">
        <img src="images/someimage.jpg" alt="" class="child-img">
    </div>
    <p>some text some text some text </p>
</div>

Answer 3

我所做的是一个棘手的事情，消除了每个图像下方的空白区域，因此在转换时不允许进一步扩展。我也改变了图像的显示。这不是这个帖子的一般答案我只是说明了什么对我有用。

这是＆＃34; upvote＆＃34;为你的答案。谢谢你的帮助

.imgmask img{
    transform: scale3d(1, 1, 1);
    transform-origin: 50% 50% 0;
    transition: transform 1s cubic-bezier(0.37, 0.23, 0.34, 0.99) 0s, opacity 0.22s ease-out 0s;
    width: 100%;
    display: block;
}

并删除了代码其他部分发生的任何边距。

转换子img时，父DIV保留大小

3 个答案: