In HTML, how do I make an Image in a table cell resize to text in the same row?

user_17584245 0
Viewed 264

I'm creating an 'About' section for a website, which is a table with three equal-width columns: a headshot, a paragraph, and another paragraph (see screenshots below).

I'd like to have the image automatically resize (keeping its aspect ratio) to be the height of the largest text- aligned left within the cell- without hardcoding any height/width values. However, I've played around a bunch and nothing seems to make the image resize.

/* an element that's one-third the width of its container */

.third-width {
  width: 33%;
}


/* the headshot photo */

#headshot {
  border-radius: 5px;
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
}

#about-table td {
  background-color: pink;
  padding: 1vw;
  text-align: justify;
  vertical-align: top;
  font-family: var(--body-font);
  font-weight: lighter;
}
<table id="about-table">
  <tr>
    <td class="third-width">
      <img id="headshot" src="https://via.placeholder.com/80" alt="None">
    </td>
    <td class="third-width">
      <p>[... SOME TEXT ...]</p>
    </td>
    <td class="third-width">
      <p>[... SOME TEXT ...]</p>
    </td>
  </tr>

Current state: Current state of the website section

What I would like: Desired state of the website section

Thank you!

html-table css html
1 Answers
  • Use CSS Flex instead of table
  • Make the cells flex: 1; position: relative;
  • Make the image position: absolute; with 100% W/H and object-fit: cover to not distort the image

/* QuickReset */

* { margin:0; box-sizing: border-box; }


/* About component */

.About {
  display: flex;
}

.About > div {
  position: relative;
  flex: 1;
  outline: 1px solid #000;
  padding: 20px;
}

.About > div img {
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="About">
  <div><img src="https://placekitten.com/408/287" alt="Catz!"></div>
  <div>Lorem ipsum</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur tempora voluptatibus eligendi dolorem. Excepturi perspiciatis ipsa porro, minus ea.</div>
</div>

<div class="About">
  <div>Lorem ipsum</div>
  <div>Molestiae sunt nisi nostrum sed,  ipsa porro, minus ea.</div>
  <div><img src="https://placekitten.com/500/300" alt="Catz!"></div>
</div>

<div class="About">
  <div><img src="https://placekitten.com/310/290" alt="Catz!"></div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sunt nisi nostrum sed, assumenda sequi doloribus excepturi quibusdam obcaecati tenetur</div>
  <div>Lorem ipsum</div>
</div>

user_3839040
Related