Image table that maintains aspect ratio of images
<p>I currently have a table setup that holds images in a table of varying sizes and is able to resize the image accordingly. How can I make the image maintain aspect ratio?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* THIS PART IS FOR PAGE SETUP*/

.page-wrap {
  min-height: 100%;
  /* equal to footer height */
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer,
.page-wrap:after {
  margin: 0;
  margin-top: 100px;
}
.site-footer {
  border-top: 2px dashed #95a0b7;
  margin-left: auto;
  margin-right: auto;
}
/* this is styling! */

.post {
  color: #843900;
  font-family: Calibri;
  font-size: 112%;
  border: 2px solid #;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 10;
}
html,
body {
  background-color: #d1d6e0;
  height: 100%;
}
/* THIS STUFF IS FOR DESIGN */

table {
  width: 100%;
  height: 100%;
}
td {
  padding-left: 10px;
  padding-bottom: 10px;
}
th {
  text-align;
  left;
}
.postTableBorder {
  border-bottom: 1px dashed #95a0b7;
}
.footer {
  text-align: center;
  color: #843900;
  font-family: Calibri;
  font-size: 112%;
  padding-bottom: 10px;
  font-weight: bold;
}
h1 {
  color: #843900;
  font-family: Calibri;
  font-size: 500%;
  text-align: center;
  margin: 0;
  border-bottom: 5px dotted #95a0b7;
}
a {
  text-decoration: none;
  color: #843900;
  text-shadow: 1px 1px 2px #662c00;
}
a:hover {
  color: #662c00;
}
.headerP {
  font-weight: bold;
  color: #843900;
  font-family: Calibri;
  font-size: 150%;
}
.headerPselected {
  font-weight: bold;
  color: #843900;
  font-family: Calibri;
  font-size: 150%;
  border-solid: solid 2px #7684a2;
}
.image {
  position: relative;
  width: 100%;
  /* for IE 6 */
  box-shadow: -1px -1px 3px #0a0c0f, 1px 1px 3px #47566b;
  line-height: 0;
}
.imageTD {
  vertical-align: top;
  padding-bottom: 10px;
}
h2 {
  position: absolute;
  bottom: 0px;
  left: 10px;
  width: 100%;
  color: black;
  font-family: Calibri;
}
/* COLORS FOR H2*/

.blue {
  color: #0033cc;
  text-shadow: 1px 1px 1px #002699;
}
.red {
  color: #4d0000;
  text-shadow: 1px 1px 1px #1a0000;
}
.imageLink:hover {
  opacity: 0.66;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
  &lt;link rel="stylesheet" href="css/main.css"&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Marc&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;div class="page-wrap"&gt;
    &lt;header&gt;
      &lt;h1&gt;
                    &lt;a href = "main.html"&gt; Homeless Helpers&lt;/a&gt;
                &lt;/h1&gt;
      &lt;table class="headerTable" , width="100%"&gt;
        &lt;tr&gt;
          &lt;th width="20%"&gt;
            &lt;p class="headerP"&gt;
              &lt;a href="message.html"&gt;Message&lt;/a&gt;
            &lt;/p&gt;
          &lt;/th&gt;
          &lt;th width="20%"&gt;
            &lt;p class="headerP"&gt;
              &lt;a href="life.html"&gt;Goal&lt;/a&gt;
            &lt;/p&gt;
          &lt;/th&gt;
          &lt;th width="20%"&gt;
            &lt;p class="headerP"&gt;
              &lt;a href="videos.html"&gt;Testimonials&lt;/a&gt;
            &lt;/p&gt;
          &lt;/th&gt;
          &lt;th width="20%"&gt;
            &lt;p class="headerP"&gt;
              &lt;a href="documentation.html"&gt;Media&lt;/a&gt;
            &lt;/p&gt;
          &lt;/th&gt;
          &lt;th width="20%"&gt;
            &lt;p class="headerP"&gt;
              &lt;a href="documentation.html"&gt;Donate&lt;/a&gt;
            &lt;/p&gt;
          &lt;/th&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/header&gt;

    &lt;table&gt;
      &lt;tr&gt;
        &lt;td width="33%"&gt;
          &lt;div class="image"&gt;
            &lt;a href="code.html"&gt;
              &lt;div style='width:100%;height:100%'&gt;
                &lt;img src='imgs/tweepy.png' style='width:100%;height:500px' alt='[]' class="imageLink" /&gt;
                &lt;h2 class="blue"&gt; Care Packages&lt;/h2&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td width="33%" , class="imageTD"&gt;
          &lt;div class="image"&gt;
            &lt;div style='width:100%;height:100%'&gt;
              &lt;img src='http://placehold.it/1000x1000' style='width:100%;height:500px' alt='[]' , align="top" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td width="33%" , class="imageTD"&gt;
          &lt;div class="image"&gt;
            &lt;div style='width:100%;height:100%'&gt;
              &lt;img src='http://placehold.it/1000x1000' style='width:100%;height:500px' alt='[]' , align="top" /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td width="25%" , class="imageTD"&gt;
          &lt;div class="image"&gt;
            &lt;div style='width:100%;height:100%'&gt;
              &lt;img src='http://placehold.it/1000x1000' style='width:100%;height:300px' alt='[]' /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td width="25%" , class="imageTD"&gt;
          &lt;div class="image"&gt;
            &lt;div style='width:100%;height:100%'&gt;
              &lt;img src='http://placehold.it/1000x1000' style='width:100%;height:300px' alt='[]' /&gt;
              &lt;h2 class="red"&gt; This is a test red&lt;/h2&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/td&gt;
        &lt;td width="50%" , class="imageTD" , rowspan="2"&gt;
          &lt;div class="image"&gt;
            &lt;div style='width:100%;height:100%'&gt;
              &lt;img src='http://placehold.it/1000x1000' style='width:100%;height:614px' alt='[]' /&gt;
              &lt;h2 class="red"&gt; This is a test red&lt;/h2&gt;
            &lt;/div&gt;
          &lt;/div&gt;

        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;th colspan="2" , width="50%" , class="imageTD"&gt;
          &lt;div class="image"&gt;
            &lt;div style='width:100%;height:100%'&gt;
              &lt;img src='http://placehold.it/1000x300' style='width:100%;height:300px' alt='[]' /&gt;

            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/table&gt;




  &lt;/div&gt;
  &lt;footer class="site-footer"&gt;
    &lt;p class="footer"&gt;
      made by awesome people.
    &lt;/p&gt;
  &lt;/footer&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>How can I make it so that the images hold a ratio of 4:3 when the window is resized?</p>