Html 响应背景图像-逐渐调整大小/重新缩放

是否可能我可以逐渐重新缩放我的背景图像

目前，媒体查询迫使它在某个阶段从900px跳到300px高度。我如何逐渐做到这一点

.hero{
背景：url（'http://placehold.it/1400x900中-中不重复；
背景尺寸：封面；
高度：900px；
}
@仅介质屏幕和（最大宽度：420px）{
.英雄{
高度：300px
}
}

---

您可以执行以下操作：

.hero{
背景：url（'http://placehold.it/1400x900中-中不重复；
背景尺寸：封面；
高度：900px；
}
@仅介质屏幕和（最大宽度：420px）{
.英雄{
高度：300px；
背景尺寸：100%自动；
}
}

试试这个：

.container{
高度：900px；
}
.英雄{
背景：url（'http://placehold.it/1400x900中-中不重复；
背景尺寸：100%自动；
身高：100%；
}

您可以使用百分比，这样100%的高度将保持在它所能提供的高度。你能用我的例子告诉我怎么做吗？它必须从900px开始，在mobile上必须是300px，但是如果可能的话，我希望其余的都有所不同。它需要css背景图像还是可以使用

标记？