How to fit images into <td> keeping the exact size of <td>

Question

I'm trying to sort out quite a challenging issue. I have a header of a website into which three random picture will be generated. The collection of picture is quite huge and so the aspect ratio vary from picture to picture.

The header of the web is in fact a responsive table with one row and three table cell:

.header table {
                width: 94%;
                border: 0;
                background: transparent;
                margin-left: 5%;
                margin-right: 5%;
                vertical-align: middle;
                display: table;
}  

Now what I'd like to do is to:

1. Keep the table responsive (i.e. if possible avoid defining width and height with pixels and use rather "%") => like this:

   .header td {
               display: table-cell;
               width: 25%;
               height: auto;
               text-align: center;
               vertical-align: middle;
       }
   

2. ...but at the same time, to fit three random picture into to the table cell without changing the size or aspect ratio of the table cell... It means that some pictures will be cropped.

I was experimenting with the css3 attribute contain:

    .header td {...

            background-repeat: no-repeat;
            background-size: contain;
    ...}

<table class="header">
<tr>
            <td class="header" style="background-image:url('img/random1.jpg')">
            </td>
            <td class="header" style="background-image:url('img/random2.jpg')">
            </td>
            <td class="header" style="background-image:url('img/random3.jpg')">
            </td>
</tr>
</table>

But it this attribute doesn't seem to be friend with the td tag...

Anyways, I'm not actually insisting on the "table" solution. Does anyone have any kind of work around how to:

1. Make three pictures in a "row" responsible
2. Fit them into frames which don't change their proportion

?

Pure CSS solution is preferable but I guess it might not be possible.

Answer 1

First of all you need some kind of a width and hight relation, otherwhise you woun't get a responsive behavior.

So i did some dirty hack ^^

I insert a image into each td that gives me the relation, then i hide it with opacity 0 (won't work in ie8). Now if you want to insert some other contetn then work with positions and seperate containers.

HTML:

 <table class="header">
    <tr>           
        <td class="header" style="background-image:url('img/1.jpg')">
            <img src="img/1.jpg" />
        </td>
        <td class="header" style="background-image:url('img/2.jpg')">
            <img src="img/1.jpg" />
        </td>
        <td class="header" style="background-image:url('img/3.jpg')">
            <img src="img/1.jpg" />
        </td>
    </tr>
</table>

then i altered your CSS:

    table {
        width: 94%;
        border: 0;
        background: transparent;
        margin-left: 5%;
        margin-right: 5%;
        vertical-align: middle;
    }
    td {
            width: 25%;
            height: auto;
            text-align: center;
            vertical-align: middle; 
            background-repeat: no-repeat;            
            background-size: cover;
            overflow-x: hidden;
            display: inline-block;
    }

    td img {
        opacity: 0;
        width: 100%;
        height: auto;
    }

It's looking kind a wierd becaus im using a table layout and then i overwrite the tabel display behavior (display: inline-block), but im missing some backround informations so i decided to use exact yout html.

Here you can see the result JS Fiddle