javascript - 更改父元素比例,同时保持子元素比例正确
问题描述
我有一个父元素,它的动画形状从横向到纵向,反之亦然。父元素包含一个图像,当其父元素改变形状时,它会被扭曲。我希望图像保持正确的比例,例如保持在父对象的中间,同时在边缘被截断。
这类似于图像如何使用 来保持比例object-fit
,但我不能在这里使用它,因为父级使用变换进行动画处理以避免布局抖动。
我的问题的简化示例:
const parent = document.querySelector('.parent');
parent.addEventListener('click', () => {
parent.animate(
[
{ transform: 'scale(1, 1)' },
{ transform: 'scale(0.5, 1.5)' }
],
{
duration: 560,
fill: 'forwards',
}
);
});
html, body {
height: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<figure class="parent">
<img src="https://placeimg.com/560/320/arch">
</figure>
</div>
什么是解决这个问题的好方法?
解决方案
推荐阅读
- react-native - 如何在 Android 中使用 React Navigation Deep 链接
- reactjs - react js编译失败
- apache - 如何在 Apache FTP 上实现 ALLO 命令?
- email - 发送到与来自地址相同域的电子邮件以“中继被拒绝”退回
- vim - vim:在使用 cscope 时更改密码
- c - Makefile 找不到规则
- hadoop - 如何在不编码的情况下查看/创建 kylin cube 的 hbase 表
- c# - 带有.net核心模型的Angular 6未绑定
- r - 使用 R 比较两个文本文件
- java - ARCore – 来自 arFragment 的图像与片段的显示不同