Currently, I am in the process of creating a mobile e-mail template without the use of JavaScript. The main requirement is for the template to be responsive.
My goal is to insert multiple images in a row, with the ability for the images to scale down when the screen size decreases. To achieve this, I utilized CSS tables and table-cell properties to allow the images to resize accordingly.
However, due to the high chances of images being blocked by e-mail clients, I have been asked to incorporate a gray placeholder. This placeholder should display the "alt text" of the image when it fails to load, while maintaining the same size and responsiveness as the actual image.
Progress on this task can be seen in the following fiddle: http://jsfiddle.net/ow7c5uLh/29/
To address these issues, I have structured the HTML as follows:
<div class="table">
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
</div>
In terms of CSS styling:
.table {
display: table;
table-layout: fixed;
width: 100%;
}
.table-cell {
display: table-cell;
text-align: center;
padding: 0 5px;
border: 1px dotted black;
}
.placeholder {
max-width: 120px;
max-height: 60px;
margin: auto;
background-color: #505050;
color: #FFFFFF;
}
img {
max-width: 100%;
height: auto;
}
However, I am encountering two main issues:
- As the screen width decreases and the images scale down, the background-color of the placeholder becomes visible around the image edges. This is due to the placeholder-div scaling similarly to the image, but its height appears to be slightly larger than the image height. I am unsure of the reason for this discrepancy.
- When the images fail to load (such as making the image URL invalid in the fiddle), the placeholder-div's height collapses. How can I ensure that the placeholder maintains its correct height even in such cases?
For future reference, the actual images used in the template may vary in size, but I will have access to their dimensions and aspect ratio. I plan to include these values directly in the HTML code rather than in a separate CSS file.
Any assistance or guidance on resolving these issues would be greatly appreciated. Thank you!