如何设置父div内边距相对子元素图片高度自适应且无需硬编码

首先你给出的DOM结构如下：

<div class="parent">
   <img class="child" src="url" alt="" />
</div>

根据适配场景不同，有两类实现方案可选： #

方案1：纯CSS实现（仅适用于固定宽高比的图片） #

如果你的图片宽高比固定，可以用CSS变量配合aspect-ratio属性实现，无需引入JS：

• 先将图片的宽高比定义为CSS变量，例如200px×50px的图片宽高比为4:1，对应变量为--img-aspect-ratio: 4/1
• 父元素的padding通过calc()动态计算，计算逻辑为：父容器宽度 ÷ 图片宽高比 = 图片渲染高度，再除以2即可得到目标padding值
  示例代码：

.parent {
  --img-aspect-ratio: 4/1; /* 替换为你的图片实际宽高比 */
  /* 如果图片宽度不是占满父容器，把100%替换为图片实际占父容器的宽度比例即可 */
  padding: calc(100% / (var(--img-aspect-ratio)) / 2);
  box-sizing: border-box;
}
.child {
  display: block;
  width: 100%;
  aspect-ratio: var(--img-aspect-ratio);
  object-fit: cover;
}

注意：该方案仅适配固定宽高比的图片，如果图片会动态更换为不同宽高比的内容，建议使用下面的JS方案 #

方案2：JavaScript实现（全场景适配，支持图片尺寸动态变化） #

该方案不依赖任何预设参数，无论图片尺寸如何变化都能实时计算正确的padding值，适配所有场景：

function setParentPadding() {
  const img = document.querySelector('.child');
  const parent = document.querySelector('.parent');
  // 取图片渲染后的实际高度计算padding
  const padding = img.offsetHeight / 2;
  parent.style.padding = `${padding}px`;
}

// 图片加载完成后计算一次padding
document.querySelector('.child').addEventListener('load', setParentPadding);
// 窗口尺寸变化时重新计算，适配响应式场景
window.addEventListener('resize', setParentPadding);

// 如果有动态更换图片src的逻辑，更换完成后手动调用setParentPadding()即可

如果页面存在多个同样结构的父容器，把上面的选择器逻辑改成遍历对应类名的元素即可。

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