display:table下CSS height属性失效，如何实现图片容器2/3宽高比？

将main元素设置为display:table布局后，尝试用vw和px单位设置其height属性均无效。需求是让section#product-image拥有与img#mobile一致的2/3宽高比（宽度:高度=2:3），使图片在width:100%、height:auto时能完全填满容器。

相关代码 #

HTML代码 #

<main class="table-container">
    
    <div id="table-row">

        <section id="product-image" class="table-column">
            <img
                src="https://lh3.googleusercontent.com/pw/AIL4fc8rzyaDFLe2uyFDdLC37ni6h2hoaEcvBkxtIKD4C_CsCscJB1nEIOBSkfi50g1juG9_AwqblO_aamPn2lId6cXOusbgZ0dY54ifsbHzoZ1o6krpArxXZTey9xOKIM08vBVClOKH6815Yc0oHP4Qu-Di3LyAKew8xk1XgFcMlWPW5aZb72JSBZGsXFCFVN9sSeENkBNakQXuCTL87Dd_3M6nZIRkM9hGctJbKo__4kcIjs6n-Y3rdAxyz2T2RriVvwnsJHLD_MiuQj2LFhkISoKUoYyROFzvNFS2ln_PiIC90M4rKrO89ioBoIZ-zc-4ilxcMtB66ukR04sSc6_vAD-6ZKjxYVkmYW5LIbmY_3Z3XeOMKG6BgLWOLRRB5sLFCoZCP4Hka8ahKC_whIthNlCEEDaJAi1ceeWJv1b2y2WN7V2RuBMR2L28B0tj584gujMkbKkO3xv04xUFrQyEZT1f3n96lmkYy5NLizwWz-dCOayXyuocWqcPJ0xfUD9y9G8XjnoueZVc383VO9v-vxMG1U38RpwRw2Y6zqAsheoiLli2k8_ol_37RjVhlmw6986SPe8SCoDjuZHT4g_SUQulcbXaVgim0BkpAyuXvMk2-WJK3NYGAI6X4GSrcCwBLKKtQODC_TPz7ZYN-HqLE78NnL_TpBbZBGBsXvj27EwVAWknph-bs2H46CGkaIQ2Q-nKH2CLEbMD9MmyGLgOjQ7kOCKpwdzpEXzk8pPZLU9IVVynm00aFnA5-JRHm1K427WmyMIbRl_88GbF4tG7AHtAnqRppB04QjaUzKuzn1oiXdqaiMIL8NIxi_MvSK7lcHhBPUHHKv_Bi7ac6NvLi40cfOoohw8oeNt6vHAWWEYh6y5YguA6ggFk9Ri2UsmOH4A94qYEGWMndyRMiiMz737Ca5QcIwtSyUu3mimFfHfAcoNN5NxemTQuqy2iDkDio4n6dCCW9b-fsJNH3nuXdU74MQzl2sxNYGYr9xgcVDAQ1r_1F33Ny7lXhCPxHjn07Ro=w572-h857-s-no?authuser=0"
                alt="image of perfume Product"
                id="mobile" />
        </section>

        <section id="description" class="table-column">
            Perfume Gabrielle Essence Eau De Parfum A floral, solar and
            voluptuous interpretation composed by Olivier Polge,
            Perfumer-Creator for the House of CHANEL. $149.99 $169.99
            Add to Cart
        </section>
    </div>
</main>

CSS代码 #

body {
    background-color: hsl(30, 38%, 92%);
}
main {
    border: 1px solid blue;
    margin: auto;
    width: 55vw;
    height: 41.25vw;
}
div {
    border: black;
    width: 100%;
    height: 100%;
}


section#product-image {
    border: 1px solid red;
    width: 50%;
}
section#product-image img#mobile {
    width: 100%;
    height: auto;
}

#description {
    background-color: rgb(255, 255, 255);
}


.table-container {
    display: table;
}
.table-row {
    display: table-row;
}
.table-column {
    display: table-cell;
    vertical-align: top;
}

核心问题说明 #

display:table元素的高度由内部内容自动撑开，手动设置的height会被忽略，这是表格布局的固有特性。要实现固定宽高比的容器，需调整布局逻辑，以下是两种可行方案：

方案1：利用padding-top实现宽高比（兼容所有浏览器） #

利用CSS中padding百分比基于父元素宽度计算的特性，给图片容器设置padding-top:150%（对应2:3的宽高比，即高度=宽度×1.5），再通过绝对定位让图片填充容器：

修改后的CSS：

body {
    background-color: hsl(30, 38%, 92%);
}
main {
    border: 1px solid blue;
    margin: auto;
    width: 55vw;
    /* 移除无效的height设置 */
}
div#table-row {
    display: flex; /* 用flex替代table布局，自动对齐左右栏高度 */
    width: 100%;
}

section#product-image {
    border: 1px solid red;
    width: 50%;
    position: relative;
    padding-top: 150%; /* 2:3宽高比 */
    overflow: hidden;
}
section#product-image img#mobile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 图片填满容器，裁剪超出部分 */
}

#description {
    background-color: rgb(255, 255, 255);
    width: 50%;
    padding: 1rem; /* 可选：优化内容内边距 */
}

/* 移除原table布局样式 */
/* .table-container { display: table; } */
/* .table-row { display: table-row; } */
/* .table-column { display: table-cell; vertical-align: top; } */

方案2：使用aspect-ratio属性（现代浏览器优先） #

CSS新增的aspect-ratio属性可直接设置容器宽高比，兼容性覆盖除IE外的所有现代浏览器：

修改后的CSS：

body {
    background-color: hsl(30, 38%, 92%);
}
main {
    border: 1px solid blue;
    margin: auto;
    width: 55vw;
}
div#table-row {
    display: flex;
    width: 100%;
}

section#product-image {
    border: 1px solid red;
    width: 50%;
    aspect-ratio: 2/3; /* 直接指定宽高比 */
    overflow: hidden;
}
section#product-image img#mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#description {
    background-color: rgb(255, 255, 255);
    width: 50%;
    padding: 1rem;
}

/* 移除原table布局样式 */

补充说明 #

• 两种方案都用flex替代了原table布局，flex布局更灵活，能自动让左右两栏高度保持一致。
• 若需保留图片完整显示而非裁剪，可将object-fit:cover改为object-fit:contain，但容器会出现留白。

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