Html 下载图像时显示加载背景色

在我的应用程序中，我通过从JSON获取图像和大小。我想填补空白，留下的图像，而加载

问题是，如果我制作了一个

div

，用固定的

宽度和
高度填充间隙，填充
div
，则填充
div
没有响应（对于图像，样式是
高度：自动；最大高度：XXXpx；
）如何在不降低宽度/高度比例的情况下使其具有响应性？

重要提示：我的目标是在不丢失比例/比例的情况下，使其与任何宽度和高度组合一起工作。


编辑：

这是我的问题的一个例子。您将检查
div
是否具有固定大小，当窗口的宽度或高度小于
256px
但图像响应时，该大小会溢出如何使
div
也能响应，而不损失比例？



//使用此函数，我们将删除具有虚拟映像的类
//（在本例中，为具有背景色的div）
常量removeDummyClass=（）=>{
文件
.getElementById（'容器'）
.班级名单
.remove（'容器'）
}
.集装箱{
背景色：红色；
宽度：256px；
高度：256px；
}
.形象{
高度：自动；
最大宽度：100%；
}
我使用了一点javascript：

隐藏页面内容并显示背景项

当正文未准备好时，每1秒运行一次脚本间隔（您可以用适当的方式处理），当页面正文准备好显示时，将页面的属性
display:none
更改为
display:block


函数onReady（回调）{
var intervalID=window.setInterval（checkReady，1000）；
函数checkReady（）{
if（document.getElementsByTagName（'body'）[0]！==未定义）
{
窗口。clearInterval（intervalID）；
回调。调用（此）；
}
}
}
功能显示（id、值）{
document.getElementById（id）.style.display=value？'block'：'none'；
}
onReady（函数（）{
显示（'page'，true）；
显示（'加载'，错误）；
});
#第页{
显示：无；
}
#装载{
显示：块；
位置：绝对位置；
排名：0；
左：0；
z指数：100；
宽度：100vw；
高度：100vh；
背景图片：url（“url到您的图片”）；
背景重复：无重复；
背景位置：中心；
}
.加载页面{
背景：#72c3c9；/*背景色*/
宽度：100vw；
高度：100vh；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
}

文件
我最终使用一个SVG来实现它，SVG中填充了一个具有预期高度和宽度的矩形，然后
onload
使用
display:none
删除SVG，并使用
display:block
显示图像



.形象{
边界半径：15px；
盒影：0px15pxRGBA（0,0,0,0.4）；
高度：自动；
宽度：100%；
最大宽度：256px；
}
.图像定稿{
显示：无；
}
.图像伪矩形{
填充物：红色；
}
常量removeDummyClass=（）=>{
document.getElementById（'image-dummy'）。style.display='none'
document.getElementById（'image-final'）.style.display='block'
}
我们不调试屏幕截图。请更新您的问题，以包括您是指文件大小还是图像大小？知道这一点很有意思。如果您得到了图像的大小，请添加一个适合该大小的div，并显示股票图像或灰色背景。@j08691我添加了一个可复制的示例，对我的问题进行了更多的解释，谢谢大家的关注。@davidev我指的是图像的大小，我添加了一个可复制的示例来说明问题，您将检查div是否没有响应（宽度/高度小于256px的窗口将溢出），但图像将在加载时调整大小。我想在div上也使用相同的响应形状。谢谢更新。我仍在努力理解这个问题。您正在加载图像，并且图像的显示位置不应该是折叠的，它应该有一个特定的大小？哪一个？那么，当图像加载时，它应该完美地安装到div中吗？或者div应该改变其相对于图像大小的大小吗？感谢您的代码，但它不考虑图像的比率，因为它使用
vh
和
vw
。