CSS height Property not working for display: table?

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

For the main (the table container) I used vw values for the height, but wasn't working. So, I used px values, but still wasn't working. My goal is to make the dimensions of section#product-image have an aspect ratio of the img#mobile image dimensions (ratio of weight to height). So that with width: 100% and height: auto, the image fills the container completely. The aspect ratio of the image is 2/3.

Answer 1

The issue is the gap underneath the photo? Use 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>

Answer 2

Please refer you comments to the original post. Please try the following 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: Don't forget to paste the img URL in the above code.

This is the modified .css definition:-

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

Hope this is what you are looking for. You can experiment with amending the .css definition to see the display behaves