css 宽高等比缩放 来源 https://juejin.cn/post/6978647140910727176
的几种方案
1：padding-top: 方案;
2：aspect-ratio

.container {
    width: 100%;
  aspect-ratio: 16 / 9;
}

gap 用法 实现边距
ResizeObserver API 实现对某个元素尺寸变化的监听

css 滚动捕捉 效果展示 https://codepen.io/airen/full/mdRpboo

.container {
  scroll-behavior: smooth;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-padding: 20px;
}

img {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}