CODEWITHSUNDEEP
htmlcsshtml-table
Jaxon Crosmas
Jaxon Crosmas

Reputation: 589

Why is my img incorrectly sized within my HTML/CSS Table?

I have created a table within my div sectionPhotographer to properly space my content. I have styled the table so that each td fills 50% of the div sectionPhotographer. I would like to place an img in one of the cells, however, the img is not sizing the way I would like it to.

.sectionPhotographer {
  height: 90%;
  background: #00aeef;
  overflow: hidden;
}

.sectionPhotographer table {
  height: 100%;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.sectionPhotographer td {
  width: 50%;
}

.sectionPhotographer img {
  height: 100%;
}
<div class="sectionPhotographer">
  <table>
    <tr>
      <td>
        <img src="https://lorempixel.com/400/100/">
      </td>
      <td>
        <h1>Turn your pictures into profits</h1>
      </td>
    </tr>
  </table>
</div>

When I set the height of img to 100%, I would expect it to fill the td it's in. However, it sizes it way too large. Any ideas as to why this is happening?

Upvotes: 1

Views: 39

Answers (1)

Temani Afif
Temani Afif

Reputation: 272723

you should add width:100% like this:

.sectionPhotographer {
  height: 90%;
  background: #00aeef;
  overflow: hidden;
}

.sectionPhotographer table {
  height: 100%;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}

.sectionPhotographer td {
  width: 50%;
}

.sectionPhotographer img {
  width: 100%;
}
<div class="sectionPhotographer">
  <table>
    <tr>
      <td>
        <img src="https://lorempixel.com/400/100/">
      </td>
      <td>
        <h1>Turn your pictures into profits</h1>
      </td>
    </tr>
  </table>
</div>

Upvotes: 1

Related Questions