How to create a div in the same size as the contained image. Both should be responsive

Question

I am creating a mobile e-mail template (means no javascript) which has to be responsive.

I want to place several images inline, which are scaled down as the screen gets narrower. I did this by using css table and table-cell, and let the image scale. No problem so far.

However, since images are often blocked by e-mail clients, I was requested to create a kind of placeholder in grey, showing the image "alt text" when the image is not loaded. I want this placeholder to be of the same size as the contained image, and to scale at narrower widths too.

I got quite far, as you can see in the following fiddle: http://jsfiddle.net/ow7c5uLh/29/

HTML:

<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>

CSS:

.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, there are two problems:

1. As the screen gets narrower and the images are scaled, the background-color pops out from under the image. The placeholder-div is scaling just as the image, but its height is calculated (by the browser) to be some 5px more then the image height. Where does that difference come from?
2. When the images are not loaded (try in the fiddle by just making the image URL invalid) then the placeholder-div's height collapses. How can I make it keep the correct height?

FYI: The actually used images won't always be of the same size, but I will know their dimensions and can calculate their aspect-ratio. I would write those values (like 120px) inline instead of in a separate css-file like in the example.

Thanks in advance for any help!

Answer 1

Remove:

img {
   height: auto;
}    
problem-1 & 2: 

    img {
       max-width: 100%;
       max-height: 100%;
    }

Answer 2

Add display: block to your CSS img rule to make it a block element instead of inline and you are good to go: Fiddle

Change src="...." of one of them to src="" in the fiddle and you will see the the cell itself already scales.

By adding rule img[alt] { font-size: 2vw; overflow: hidden } to your CSS, the html alt="text" will scale too. overflow: hidden chops excess text when alt is larger than your 120x60px.

(note: [alt] is called an 'attribute' in CSS, search for 'css custom attribute' should you want to learn to create your own.)

See updated Fiddle

I would advise against loosing the width and height rules of the placeholder, but you could change it to min-height/min-width to show at least that something 'is missing'. Or change to max-width: 100% and remove max-height, but this depends on your requirements. You will need to limit the size of an image somewhere up or down the line (for example giving the table a width in px and it's children a (max-)width in % ).