如何根据预览图片尺寸调整自定义媒体播放器父容器大小？

方案1：纯CSS基础自适应 #

直接通过CSS让父容器由图片自然撑开，同时处理播放按钮和媒体元素的悬浮定位：

.wrapper {
  position: relative;
  display: inline-block; /* 容器宽度完全跟随图片宽度 */
  max-width: 100%; /* 适配小屏幕，避免超出视口 */
}

.preview-img {
  display: block; /* 移除图片默认的行内间距 */
  width: 100%; /* 图片自适应容器，保持原始宽高比 */
  height: auto;
}

.play-button {
  position: absolute; /* 悬浮在图片中央 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.embedded-media {
  position: absolute; /* 媒体元素覆盖图片位置 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.hidden {
  display: none;
}

原理：inline-block让容器宽度由内部图片决定，图片的width:100%保证响应式收缩时比例不变，按钮和媒体元素用绝对定位，不会干扰容器的尺寸计算。

方案2：适配srcset响应式图片（JS+CSS） #

如果使用srcset加载不同尺寸的图片，需要通过JS监听图片加载状态，动态同步容器的宽高比：

// 在播放器生成逻辑中，给预览图片绑定尺寸同步逻辑
document.querySelectorAll('.preview-img').forEach(img => {
  // 图片加载完成后获取实际尺寸
  const syncWrapperSize = () => {
    const aspectRatio = img.naturalWidth / img.naturalHeight;
    const wrapper = img.closest('.wrapper');
    wrapper.style.aspectRatio = aspectRatio;
    wrapper.style.maxWidth = `${img.naturalWidth}px`; // 限制最大宽度避免过度拉伸
  };

  img.addEventListener('load', syncWrapperSize);
  // 处理图片已缓存的情况
  if (img.complete) syncWrapperSize();
});

配合CSS调整：

.wrapper {
  position: relative;
  max-width: 100%;
  width: fit-content; /* 初始宽度跟随图片 */
}

.preview-img, .embedded-media {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 可选，确保内容填充容器 */
}

原理：通过图片的naturalWidth/naturalHeight获取实际加载的资源尺寸，计算宽高比后设置给容器，确保srcset切换图片时容器尺寸同步更新。

方案3：CSS Grid绑定容器与图片尺寸 #

用Grid布局让所有子元素共享同一网格区域，容器尺寸自动由图片撑开：

.wrapper {
  display: grid;
  max-width: 100%;
  position: relative;
}

.wrapper > * {
  grid-area: 1 / 1 / 2 / 2; /* 所有子元素叠加在同一网格单元格 */
}

.preview-img {
  width: 100%;
  height: auto;
}

.play-button {
  z-index: 10;
  place-self: center; /* 按钮自动居中 */
}

.embedded-media {
  width: 100%;
  height: 100%;
}

原理：Grid布局中，容器的轨道尺寸由图片的尺寸决定，按钮和媒体元素仅做视觉叠加，不影响容器的尺寸计算。

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