html - 响应式图像和文本行

Question

我将五张图片排成一排，每张图片下方都有文字，我正试图让它响应。问题是所有图像都没有正确缩小。我希望它们都具有相同的宽度和高度。

---

到目前为止我的代码:

<table>
    <tr>
        <td>
            <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" />
            <p>testing text</p>
        </td>
        <td>
            <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" />
            <p>Longerishhh texting text</p>
        </td>
        <td>
            <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" />
            <p>Text</p>
        </td>
        <td>
            <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" />
            <p>Quite long text</p>
        </td>
        <td>
            <img src="http://thumbs.dreamstime.com/thumb160_268/1210514734LWUcju.jpg" />
            <p>More testing</p>
        </td>
    </tr>
</table>

CSS:

html{
    width: 100%;
}

table{
    width: 80%;
}

td{
    display: table-cell;
    width: 20%;
    text-align: center;
    overflow: hidden;
    vertical-align: baseline;
}

img{
    width: 100%;    
}

jsfiddle

Answer 1

将以下内容添加到表格 css 中:

table-layout: fixed;

在你的情况下:

table {
    width: 80%;
    table-layout: fixed;
}

在此处更新了 jsfiddle - http://jsfiddle.net/Y7CrV/7/