Marc Frame Marc Frame - 12 days ago 8
CSS Question

image table that maintains aspect ratio of images

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?



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

<!DOCTYPE html>
<html lang="en">

<head>
<link rel="stylesheet" href="css/main.css">
<meta charset="UTF-8">
<title>Marc</title>
</head>

<body>

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

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

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

</div>
</div>
</th>
</tr>
</table>




</div>
<footer class="site-footer">
<p class="footer">
made by awesome people.
</p>
</footer>
</body>

</html>





how can I make it so that the images hold a ratio of 4:3 when the window is resized?

Thanks for the help :D

Marc

Answer

Change the <img> heights to auto works. https://jsfiddle.net/JustusFT/3qtb1r9v/

However, I suggest you use a grid system such as bootstrap rather than using tables.

HTML:

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

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

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

          </div>
        </div>
      </th>
    </tr>
  </table>




</div>
<footer class="site-footer">
  <p class="footer">
    made by awesome people.
  </p>
</footer>