CODEWITHSUNDEEP
htmlcss
clayRay
clayRay

Reputation: 743

How to keep column images in responsive email table same height

As part of an email template that has to be responsive, (and also unfortunately table-based) I have three columns that have images of identical size in them. The images need to be in separate table cells, as there also needs to be text beneath them.

Unfortunately, if I set the width of the table cells to 33.3% and the images as being 100% of the width of the table cell, I end up with a situation where one of the images is often 1 pixel shorter than the others, at the maximum size of 800 pixels but also at other, smaller browser window sizes.

If I set the img to min-height:100% this fixes the height problem, but my design is now no longer responsive.

Here's my CSS...

.email_table {
  max-width:800px;
  width:100%;
  border-collapse: collapse;
}
.email_cell {
  width: 33.3%;
}
.email_cell img {
  display: block;  
  width: 100% !important;
  /*min-height:100%;*/
}

... and my HTML ...

<table class="email_table">
  <tr>
    <td class="email_cell">
      <img src="http://placehold.it/265x177" >
    </td>
    <td class="email_cell">
<img src="http://placehold.it/265x177" alt="" border="0" style="margin: 0;padding: 0;display: block;width: 100% !important;">        
    </td>
    <td class="email_cell">
      <img src="http://placehold.it/265x177" >
    </td>    
  </tr>
</table>

Has anyone else come across this problem and found a solution for it?

Upvotes: 0

Views: 1420

Answers (2)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Updated/Added these styles

tr {
  display: flex;
}
.email_cell {
  width: 33.3%;
  padding: 0;
}


 
.email_table {
  max-width:800px;
  width:100%;
  border-collapse: collapse;
}
tr {
  display: flex;
}
.email_cell {
  width: 33.3%;
  padding: 0;
}
.email_cell img {
  display: block;  
  width: 100% !important;
  min-height:100%;
}
<table class="email_table">
  <tr>
<td class="email_cell">
  <img src="http://placehold.it/265x177" >
</td>
<td class="email_cell">
<img src="http://placehold.it/265x177" alt="" border="0" style="margin: 0;padding: 0;display: block;width: 100% !important;">        
</td>
<td class="email_cell">
  <img src="http://placehold.it/265x177" >
</td>    
  </tr>

Upvotes: 1

Nandita Sharma
Nandita Sharma

Reputation: 13407

You can try using bootstrap for your problem. Its responsive and satisfies your criteria(I think).

Also tables are always avoided when you want a responsive web design.

 
img {
  width: 100%;
  height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row no-gutters">
<div class="col-sm-4">
  <img src="http://placehold.it/265x177" >
</div>
<div class="col-sm-4">
  <img src="http://placehold.it/265x177" >
</div>
<div class="col-sm-4">
  <img src="http://placehold.it/265x177" >
</div>
  </div>
</div>

Upvotes: 1

Related Questions