演示效果（点击F12查看控制台，拖动控制台修改屏幕尺寸查看图片变化）：

主要代码：

<div id="aa" style="width: 20%;">
    <div id="bb" style="
        padding-top: 150%;
        background-image: url(http://sdiitu.com/upload/vod/20220917-1/ccf4f9718eeee6a1f13b179331cec420.jpg);
        background-size: auto;
        background-repeat: no-repeat;
        background-position: center center;">
    </div>
</div>

响应式原理：

    1.div  #aa 必须设置一个宽度，这个宽度的单位可以是百分比，可以是rem等响应式单位；

    2.div  #bb 需要将使用padding属性撑开，可以使用padding-top或者使用padding-bottom，撑开的单位需要使用百分比，这个百分比就是将对于父级div #aa 的宽度计算的，此时如果div #aa 宽度变化，#bb的padding-top会随之变化

总结：#bb的百分比相对于#aa的宽度，#aa的宽度变化则#bb的高度随之变化，故此达到图片响应式的处理了