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

【问题标题】：Parent DIV retain size when transforming child img转换子 img 时，父 DIV 保留大小
【发布时间】：2018-01-26 02:44:38
【问题描述】：

图像的原始大小或父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;
}

【问题讨论】：

是什么限制了您设置父 div 的大小？
好吧，有一个“更大”的父 div 占据了屏幕的 50%，这是子 div 的最大尺寸，因此也是图像的最大尺寸。问题是我想使用不同高度的图像。所以这就是为什么我不能设置一个特定的高度。即使从我的代码中不清楚，宽度也是从较大的父级设置的。
不能把溢出隐藏到父容器吗？如果包含div 的图像也被调整大小，会有什么问题？
正如您在代码中看到的，父 div 是 imgmask，并且已经存在溢出：隐藏。但它不起作用，因为它正在占用图像的大小。我希望它保留它的初始大小，尽管 img 会在悬停时改变大小。
你想保留什么初始大小？如果您的 div 没有设置大小。那么根本就没有像initial这样的东西。

标签： html css overflow transform

【解决方案1】：

您必须设置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>

【讨论】：

【解决方案2】：

将图片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>

【讨论】：

好吧，有一个“更大”的父 div，它占据了屏幕的 50%，这是子 div 的最大宽度，因此也是图像的最大宽度。问题是我想使用不同高度的图像。所以这就是为什么我不能设置一个特定的高度。即使从我的代码中不清楚，宽度也是从较大的父级设置的。所以在你的代码中，即使我设置了 max-width 和 max-height ，你可以看到它需要它的孩子的大小。所以它不起作用。
那么你需要在你的代码中指定实际问题。
两种情况都可能是问题所在。在您提供的代码中，即使我的问题是宽度，它也不能解决任何问题，因为您可以看到如果您运行代码。它需要孩子的大小，这是我不想要的，这在我的简介中有所描述。

【解决方案3】：

我所做的是一件棘手的事情，它消除了每个图像下方的空白空间，因此在转换时不允许进一步扩展。我还更改了图像的显示。这不是这个线程的一般答案，我只是说明什么对我有用。

这是对您答案的“赞成票”。感谢您的帮助

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

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

【讨论】：