按视口比例调整图像大小，但保持它们的相对位置相似

Question

我正在一个网站上工作，该网站的图片要比其他图片多，以显示配电盘背景，并以开关作为覆盖以表示开/关状态。我试图确保我的网站可以在不同分辨率下使用，但是图像在较小的设备上占用了过多的屏幕空间。我需要按比例缩放所有图像，同时还要保持它们的纵横比和彼此相对的位置。

关于成功扩展此功能，我还没有取得太大的成功。我正在尝试模拟当您使用CTRL + scroll缩放页面时Web浏览器使用的缩放算法。

我正在寻求如下效果 [！[我的基本图表] [1]] [1]

任何帮助或建议都将不胜感激。

编辑：以下是当我尝试使用提出的vw / vh解决方案时在移动设备上的站点的图片。如您所见，即使在vw和vh中提出了单位，它们也无法正确对齐。

编辑2：我最近在这里尝试的完整HTML和CSS。

HTML

<div id="master_main_container" class="draggable panel_container">
    <div class="panel_header draggable_handle">Master<span class="close" id="master_close">&times;</span></div>
    <div id="panel_content_master" class="panel_content" > 
        <div id="master_switch_alt" class ="master_switch_off_alt"></div>
        <div id="master_switch_bat" class ="master_switch_off_bat"></div>
    </div>    
</div>

CSS

.panel_container {
    border: 2px solid black;
    background-color: #777777;
}

.panel_header{
    padding: 2px;
    border-bottom: 1px solid black;
    color: white;                
    background-color: red;
    font-weight: bold;
}

.panel_content {
    padding: 2px;
    overflow: hidden;
}

#panel_content_master {
    background-image: url(../images/masterPanelBg.jpg);
    padding-top: 107.73%;
    width: 9vw;
    background-repeat: no-repeat;
    background-size: contain;
}

#panel_content_breakers {
    background-image: url(../images/breakerrPanelBg.jpg); 
    padding-top: 32.39%;
    width: 30.4vw;
    background-repeat: no-repeat;
    background-size: contain;
}

#panel_content_switches {
    background-image: url(../images/switchesPanelBg.jpg); 
    padding-top: 76.82%;
    width: 12.7vw;
    background-repeat: no-repeat;
    background-size: contain;
}

#master_switch_alt {
    position: absolute;
    top: 16vh;
    left: 1.8vw;
    width: .75vw;
    padding-top: 364.29%;

    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}


#master_switch_bat {
    position: absolute;
    top: 16vh;
    left: 2.6vw;
    width: .75vw;
    padding-top: 364.29%;

    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

/*Styling for the master Switch Off image  -- .master_switch_bat*/
.master_switch_off_alt{
    background-image: url(../images/masterOff.jpg);       
}

/*Styling for the master Switch On image */
.master_switch_on_alt{
    background-image: url(../images/masterOn.jpg);      
}

/*Styling for the master Switch Off image  -- BAT*/
.master_switch_off_bat{
    background-image: url(../images/masterOff.jpg);     
}

/*Styling for the master Switch On image -- BAT*/
.master_switch_on_bat{
    background-image: url(../images/masterOn.jpg);      
}

我知道一切都很糟糕。