Javascript CSS/JS：使用已知宽度和高度的图像元素模拟背景图像封面

我正在尝试用css为视频缩略图创建信箱。缩略图可以是任意大小，但我希望它们适合固定纵横比为16:9的盒子。如果我使用

背景图像

属性，这很容易实现。请参见下面的示例：

.container{
背景颜色：灰色；
位置：相对位置；
宽度：100%；
垫面：56.25%；
背景尺寸：包含；
背景重复：无重复；
背景位置：中心；
}
.集装箱1{
背景图像：url（“https://bulma.io/images/placeholders/640x480.png");
}
.集装箱2{
背景图像：url（“https://bulma.io/images/placeholders/720x240.png");
}

您是否尝试在图像元素上使用CSS对象匹配

---

检查此行：

$（'.container img'）.one（'load'，function（）{

-应该是

上的吗？

替代技巧1：使用img加载图片，但使其不可见。加载后，这意味着它现在在缓存中。更新背景色/图像。替代技巧2：通过ajax下载图片并在客户端转换为数据uri。然后使用数据uri更新背景色/图像.