Html - CSS height Property not working for display: table?

CodingNerd
July 30, 2023
191 views
0 votes
2 Answers

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

Answers

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

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – CSS height Property not working for display: table?

Answers