Javascript CSS按分辨率定位和缩放对象

我该怎么做呢？ 我不能让它填满侧面的空白，我可以只用css来做吗（这样它也可以与浏览器缩放一起工作）

这是我的代码（简化），因为没有任何东西适合我，所以我提供了一个原始代码

#母公司{
宽度：1000px；
高度：1000px；
背景色：#0ff；
}
.孩子{
宽度：400px；
高度：200px；
利润率：20px；
背景色：#f00；
浮动：左；
}

按如下方式设置父容器的样式（如果没有，则创建它）

.parent {
display:flex;
flex-wrap:wrap;
}

.child {
flex: 1;
width: 45%;  /* whatever you want on the bigger screen */

@media ( min-width : 500px ) {

    .child {
       width:100% ;
    }
}

---

使用flexbox

#父级{
显示器：flex；
柔性包装：包装；
背景色：#0ff；
}
.孩子{
弹性：10自动；
宽度：400px；
高度：200px；
利润率：20px；
背景色：#f00；
}
Flexbox在这方面非常擅长：

（或在下面运行）


div.out{
边框：#f00实心1px；
宽度：500px；
高度：300px；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
分区输出分区柔性{
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
边框：#00f虚线1px；
宽度：100%；
}
分区输出分区灵活分区输入{
最小宽度：300px；
边框：#008000实心5px；
高度：100px；
-webkit-box-flex:1；
-webkit-flex-grow:1；
-ms-flex阳性1例；
柔性生长：1；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-ms-flex-align：居中；
对齐项目：居中；
}
分区输出分区灵活分区输入h2{
字号：2rem；
}
/*下图：仅用于动画*/
除名{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画名称：changewidth；
动画名称：changewidth；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画方向：交替；
动画方向：交替；
}
@-webkit关键帧更改宽度{
从{
宽度：300px；
}
到{
宽度：800px；
}
}
@关键帧更改宽度{
从{
宽度：300px；
}
到{
宽度：800px；
}
}

内容1
内容2
请提供您正在尝试的代码。提醒一下，在发布问题之前，请检查现有问题。我相信有一些问题与我尝试过那样做有关，我的问题是它不影响用户何时使用浏览器ZoomyYou应该创建一个工作示例，因为这不起作用。