移动端h5自适应图片盒子

背景：通过h5c3+js使用HBuild制作移动端交互h5,在谷歌浏览器完全显示移动端内容

img

img

问题：1.怎么才能实现网页缩放时，图片+存放盒子也能等比例缩放
2.怎么确定盒子的高度宽度(因为我要通过定位居中盒子在里面写别的小组件)

img

    <body>
        
        <div class="index">
            <div class="tp">
                <img src="./img/1.png" alt="">
            </div>
            <div class=""></div>
        </div>
    </body>


<style>
            html{
                font-size: 14px;
            }
            body{
                max-width: 520px;
                margin: 0 auto;
                padding: 0;
                background-color: bisque;
                text-align: center;
            }
            .index{
                margin: 0 auto;
            }
            .tp img{
                height: 100vh;
                vertical-align: bottom;
            }
            .tp{
                height:0;
                
                padding-bottom:56.25%; /* 16:9 */
                
                position:relative;
                
                width:100%;
            }
            
        </style>
目前情况是图片可以自适应变化，但是盒子设定宽高后不能自适应页面等比例缩放，和图片宽高不一样无法定位写别的元素
我的解答思路和尝试过的方法 ：bootstrap网格布局、百分比无法在移动端适应，有空隙
我想要达到的结果：移动端页面在网页居中完整显示，并且支持网页等比例缩放，存放图片的盒子和图片一样宽高并且自适应

媒体查询 rem