广告等比例缩放时如何让容器不占满100%宽高且仅可视区域可点击

• 第一步调整外层容器属性
  给广告外层容器设定你需要的最大宽高限制，添加aspect-ratio属性匹配广告素材的实际宽高比，同时设置overflow: hidden裁剪超出容器的内容，再把容器定位设为relative作为内部元素的定位基准，示例代码如下：

.ad-wrapper {
  /* 按需调整为你需要的最大宽高，不用设为100% */
  max-width: 900px;
  max-height: 500px;
  /* 替换为你的广告素材实际宽高比，保证素材等比例适配 */
  aspect-ratio: 16/9;
  overflow: hidden;
  position: relative;
  /* 可选，需要居中的话添加 */
  margin: 0 auto;
}

如果需要兼容不支持aspect-ratio的旧浏览器，可以用padding百分比方案替代：

.ad-wrapper {
  max-width: 900px;
  overflow: hidden;
  position: relative;
  height: 0;
  /* 16:9比例对应的padding值，计算方式：高度/宽度*100% */
  padding-top: 56.25%;
}

• 第二步保留内部素材的缩放逻辑
  内部广告素材的等比例缩放规则不用大幅改动，只需要把适配基准从窗口改为当前外层容器即可，基础样式参考：

.ad-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

如果你原来用JS控制缩放，只需要把缩放计算时取值的window.innerWidth/window.innerHeight替换为容器的offsetWidth/offsetHeight即可。

• 第三步限制点击区域仅覆盖可视范围
  把原来的click tag元素放在广告容器内部，设置绝对定位铺满整个容器，层级设为高于素材即可，超出容器被裁剪的部分不会触发点击，样式参考：

.click-tag {
  position: absolute;
  inset: 0;
  z-index: 99;
  cursor: pointer;
  background: transparent;
  border: none;
}

内容的提问来源于stack exchange，提问作者Palf