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

图像或父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>

---

将图像

宽度：100%

更改为

最大宽度：100%


.imgmask img{
变换：scale3d（1,1,1）；
变换原点：50%50%0；
变换：变换1s三次贝塞尔（0.37,0.23,0.34,0.99）0s，不透明度0.22s减少0s；
最大宽度：100%；
溢出：隐藏
}
.imgmask{
溢出：隐藏；
边框：1px纯红；
}
.imgmask：悬停img{
不透明度：0.95；
转换：scale3d（1.2,1.2,1.2）！重要；
变换：变换2.2s三次贝塞尔（0.37,0.23,0.34,0.99）0s，不透明度0.22s减少0s；
}

一些文字一些文字一些文字

将图像
宽度：100%
更改为
最大宽度：100%


.imgmask img{
变换：scale3d（1,1,1）；
变换原点：50%50%0；
变换：变换1s三次贝塞尔（0.37,0.23,0.34,0.99）0s，不透明度0.22s减少0s；
最大宽度：100%；
溢出：隐藏
}
.imgmask{
溢出：隐藏；
边框：1px纯红；
}
.imgmask：悬停img{
不透明度：0.95；
转换：scale3d（1.2,1.2,1.2）！重要；
变换：变换2.2s三次贝塞尔（0.37,0.23,0.34,0.99）0s，不透明度0.22s减少0s；
}

一些文字一些文字一些文字

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


一些文字一些文字一些文字

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


一些文字一些文字一些文字

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

这是对你答案的“投票”。谢谢你的帮助

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

并删除了代码其他部分中出现的任何边距。
我所做的是一件棘手的事情，消除了每个图像下的空白，因此在转换时不允许进一步扩展。我还更改了图像的显示。这不是对这条线索的一般回答，我只是说明什么对我有效

这是对你答案的“投票”。谢谢你的帮助

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

并删除了我代码其他部分中出现的任何边距。
是什么限制您设置父div的大小？有一个“更大”的父div占据了屏幕的50%，这是子div的最大大小，因此也是图像的最大大小。问题是我想使用不同高度的图像。这就是为什么我不能设定一个特定的高度。从我的代码中看不清楚的宽度是从较大的父容器中设置的。您不能将溢出隐藏设置为父容器吗？如果包含图像的
div
也被调整了大小，那会有什么问题呢？正如您在代码中看到的，父div是imgmask，并且已经有一个溢出：hidden。但它不工作，因为它是采取图像的大小。我希望它保留它的初始大小，尽管事实上，img将改变悬停时的大小。你想保留什么初始大小？如果您的div没有设置大小。那么根本就没有什么比initial更重要的了。是什么限制你设置父div的大小呢？有一个“更大”的父div占据了屏幕的50%，这是子div的最大大小，因此也是图像的最大大小。问题是我想使用不同高度的图像。这就是为什么我不能设定一个特定的高度。从我的代码中看不清楚的宽度是从较大的父容器中设置的。您不能将溢出隐藏设置为父容器吗？如果包含图像的
div
也被调整了大小，那会有什么问题呢？正如您在代码中看到的，父div是imgmask，并且已经有一个溢出：hidden。但它不工作，因为它是采取图像的大小。我希望它保留它的初始大小，尽管事实上，img将改变悬停时的大小。你想保留什么初始大小？如果您的div没有设置大小。还有一个更大的父div占据了屏幕的50%，这是子div和图像的最大宽度。问题是我想使用不同高度的图像。这就是为什么我不能设定一个特定的高度。虽然我的代码中不清楚宽度，但它是从较大的父级设置的。因此，在您的代码中，即使我设置了最大宽度和最大高度，您也可以看到，它会根据其子对象的大小进行设置。所以它不起作用。然后你需要在你的代码中指定实际的问题。这两种情况都可能是问题。在您提供的代码中，即使我的问题是宽度，它也不能解决任何问题，正如您运行代码时所看到的那样。它采用了我不想要的childs大小，这在我的简介中已经描述过了。有一个“更大”的父div占据了屏幕的50%，这是childdiv的最大宽度，因此也是图像的最大宽度。问题是我想使用不同高度的图像。这就是为什么我不能设定一个特定的高度。虽然我的代码中不清楚宽度，但它是从较大的父级设置的。因此，在您的代码中，即使我设置了最大宽度和最大高度，您也可以看到，它会根据其子对象的大小进行设置。所以