CSS height 属性不适用于显示：表格？

Question

        <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>

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;
}

对于

main

（表格容器），我使用

vw

值作为高度，但不起作用。所以，我使用了

px

值，但仍然不起作用。我的目标是使

section#product-image

的尺寸具有

img#mobile

图像尺寸的纵横比（重量与高度的比率）。因此，使用

width: 100%

和

height: auto

时，图像完全填充容器。图像的长宽比为

2/3

。

Answer 1

请参考原帖的评论。请尝试以下

HTML

：-

<main class="table-container">
        <div class="table-row"> <!-- Added the CSS class "table-row" here -->
            <section id="product-image" class="table-column">
                <img src="<Your Image URL>"
                    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>

PS：别忘了在上面的代码中粘贴img URL。

这是修改后的

.css

定义：-

body {
    background-color: hsl(30, 38%, 92%);
}
main {
    border: 1px solid blue;
    margin: auto;
    width: 55vw;
}
div {
    border: black;
    width: 100%;
}
section#product-image {
    border: 1px solid red;
    width: 50%;
    padding-bottom: calc(100% * 3 / 2);
    position: relative;
    overflow: hidden;
}
section#product-image img#mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
#description {
    background-color: rgb(255, 255, 255);
}
.table-container {
    display: table;
}
.table-row {
    display: table-row;
}
.table-column {
    display: table-cell;
    vertical-align: top;
}

希望这是您正在寻找的。您可以尝试修改

.css

定义来查看显示行为

Answer 2

问题是照片下方的间隙？使用

line-height: 0

section#product-image {
  border: 1px solid red;
  width: 50%;
  line-height: 0;
}

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%;
  line-height: 0;
}
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;
}

<main class="table-container">

    <div id="table-row">

        <section id="product-image" class="table-column">
            <img
                src="//picsum.photos/200/300"
                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>