如何根据div自身宽度设置75:97比例的高度（Bootstrap场景）

要实现元素高度随自身宽度按75:97的比例自适应，最可靠的CSS方案是利用padding百分比的特性——CSS中padding的百分比值始终基于元素的宽度计算，刚好能满足你的需求。

具体修改步骤如下：

1. 调整.my-div的CSS样式：

   • 移除固定高度height:150px
   • 添加position: relative用于内部元素定位
   • 用padding-top: calc(97 / 75 * 100%)实现宽高比（计算后约为129.333%）
   • 保留border-radius并添加overflow: hidden，确保内部元素不会超出圆角范围

2. 调整内部.bg-light元素的样式，使其占满.my-div的空间并保持原有内边距：

   • 设置绝对定位，覆盖整个.my-div
   • 添加原有的padding:20px，Bootstrap已默认全局设置box-sizing: border-box，无需额外添加

修改后的完整CSS代码：

.my-div{
   /* 移除固定高度 */
   /* height: 150px; */
   position: relative;
   border-radius: 20px;
   padding-top: calc(97 / 75 * 100%); /* 75:97 宽高比转换为百分比 */
   overflow: hidden;
}

.my-div > .bg-light{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   padding: 20px;
}

HTML结构无需修改，保持原有的Bootstrap栅格布局即可。

原理说明：

• padding-top: calc(97/75*100%)会让.my-div的高度等于自身宽度的97/75倍，完美匹配你要的比例
• 绝对定位的内部元素会完全填充.my-div的空间，同时通过自身的padding保留原有的内边距效果

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