Html 缩放CSS逐帧动画（保存我！）

我想知道你们中是否有人可以帮助我解决CSS/HTML问题

我有一个使用背景和steps（）方法的基于CSS的动画。不幸的是，这意味着缩放一直是一个问题

是否有一种方法可以简单地缩放包含此项的div以适应屏幕？我不介意长宽比，这不是问题。以下是我的动画CSS：

    .pageOpen {
  width: 710.956522px;
  height: 400px;
  background: url('/Images/SiteVitalImages/preloader-open.png') left center;
  background-repeat: no-repeat;
  background-size: cover;
  animation: play 1s steps(22) infinite;
}

@keyframes play {
    100% { background-position: right ; }
}

我真的很感激你的帮助，这让我很恼火

以下是该问题的gif：

---

我希望它能够水平缩放，而不显示即将到来的动画帧。

最初我误解了您的意图。玩这个游戏，我发现你必须缩放它，所以高度是最大的尺寸，所以它不会水平重复。为了增加错觉，我把背景变成黑色，并将其居中，同时我颠倒了顺序，使其看起来更具爆炸性

您也可以在JSFIDLE上看到它

html，正文{
身高：100%；
背景色：黑色；
}
.包装纸{
位置：相对位置；
保证金：自动；
最小高度：400px；
身高：100%；
最小宽度：710px；
宽度：计算（100vh*16.0/9.0）；
}
.pageOpen{
最小高度：400px；
最小宽度：710px；
身高：100%；
宽度：100%；
背景：url（'https://www.contingentgame.com/storage/themes/godlike/assets/images/preloader-bg.png’）右中无重复；
背景尺寸：封面；
动画：播放1.5步（22步）无限；
溢出：隐藏；
}
@关键帧播放{
100% {
背景位置：左中；
}
}

---

起初我误解了你的意图。玩这个游戏，我发现你必须缩放它，所以高度是最大的尺寸，所以它不会水平重复。为了增加错觉，我把背景变成黑色，并将其居中，同时我颠倒了顺序，使其看起来更具爆炸性

您也可以在JSFIDLE上看到它

html，正文{
身高：100%；
背景色：黑色；
}
.包装纸{
位置：相对位置；
保证金：自动；
最小高度：400px；
身高：100%；
最小宽度：710px；
宽度：计算（100vh*16.0/9.0）；
}
.pageOpen{
最小高度：400px；
最小宽度：710px；
身高：100%；
宽度：100%；
背景：url（'https://www.contingentgame.com/storage/themes/godlike/assets/images/preloader-bg.png’）右中无重复；
背景尺寸：封面；
动画：播放1.5步（22步）无限；
溢出：隐藏；
}
@关键帧播放{
100% {
背景位置：左中；
}
}

---

您最大的问题是，您的图像需要的纵横比不是这样。您可以通过将其嵌入到另一个div中并遵循以下内容来设置它自己的纵横比

我设法制作了一些东西来保持纵横比，但是当高度小于纵横比时，它不是垂直居中的

@关键帧播放{
100% {
背景位置：左中；
}
}
身体，
html{
/*公平地说，应该始终禁用这些选项，以防止意外的填充、边距或移动*/
填充：0；
保证金：0；
}
.中心{
位置：绝对位置；
}
.center.y{
顶部：0；底部：0；/*垂直中心*/
}
.center.x{
左：0；右：0；/*水平中心*/
保证金：自动；
}
.锁高{
最大高度：100vh；
高度：100vh；
}
.锁宽{
最大宽度：100vw；
宽度：100vw；
}
.流背景容器{
溢出：隐藏；
位置：相对位置；
}
.流动背景{
垫面：56.338%；
/*对于400/710纵横比*/
背景：url（'https://www.contingentgame.com/storage/themes/godlike/assets/images/preloader-bg.png’）右中无重复；
/*多种类型可提供更多支持。IE9+http://caniuse.com/#feat=background-img选择*/
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
动画：播放1.5步（22步）无限；
}

---

您最大的问题是，您的图像需要的纵横比不是这样。您可以通过将其嵌入到另一个div中并遵循以下内容来设置它自己的纵横比

我设法制作了一些东西来保持纵横比，但是当高度小于纵横比时，它不是垂直居中的

@关键帧播放{
100% {
背景位置：左中；
}
}
身体，
html{
/*公平地说，应该始终禁用这些选项，以防止意外的填充、边距或移动*/
填充：0；
保证金：0；
}
.中心{
位置：绝对位置；
}
.center.y{
顶部：0；底部：0；/*垂直中心*/
}
.center.x{
左：0；右：0；/*水平中心*/
保证金：自动；
}
.锁高{
最大高度：100vh；
高度：100vh；
}
.锁宽{
最大宽度：100vw；
宽度：100vw；
}
.流背景容器{
溢出：隐藏；
位置：相对位置；
}
.流动背景{
垫面：56.338%；
/*对于400/710纵横比*/
背景：url（'https://www.contingentgame.com/storage/themes/godlike/assets/images/preloader-bg.png’）右中无重复；
/*多种类型可提供更多支持。IE9+http://caniuse.com/#feat=background-img选择*/
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
动画：播放1.5步（22步）无限；
}

如果纵横比不是问题，那么问题是什么？你只需要知道用什么来代替像素吗？嗨@BSMP！老实说，我不知道如何扩展它，我对HTML和CSS都很陌生。当我尝试缩放div时，它会水平重复，因为背景宽度不能独立缩放。我希望这能澄清一点！你能解释一下你想要的行为是什么吗？也许你能提供足够的代码来重现你的问题。编辑：更新的JS Fiddle链接仍然不能解释你想要它的行为。。。如果保留纵横比不是问题，那么问题在哪里