Я выстроил пять изображений в строке с текстом под каждым, и я пытаюсь сделать его отзывчивым. Проблема в том, что все изображения не масштабируются должным образом. Я хочу, чтобы все они имели ту же ширину & height.Отзывчивый ряд изображений и текст
Мой код до сих пор:
<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%;
}
попробовать это http://jsfiddle.net/Y7CrV/4/ или HTTP: //elvery.net/demo/responsive-tables/ – falguni