<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;padding:0;}
.layout {position:relative;background-color:#CCC;}
.layout img {width:100%;}
.box {position:absolute;width:20vw;height:20vw;background-color:rgba(0,0,0,0.5);}
.box.box-a {top:0;left:60vw;}
.box.box-b {bottom:0;left:30vw;}
</style>
</head>
<body>
<div class="layout">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
<div class="box box-a"></div>
<div class="box box-b"></div>
</div>
</body>
</html>
div 里的 img 设宽度 100%，img 只设置宽度，高度会自适应，外面的 div 的高度就是自适应 img 的
div 的宽度根据实际需要来定
然后 内部用 绝对定位，单位用 百分比 或者 撑满的时候用vw 都可以
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
