CODEWITHSUNDEEP
htmlcssimageresponsive-design
Oskar Persson
Oskar Persson

Reputation: 6743

Responsive row of images and text

I've lined up five images on a row with text below each one and I'm trying to make it responsive. The problem is that all the images don't scale down properly. I want them all to have the same width & height.

My code so far:

<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

Upvotes: 3

Views: 8631

Answers (3)

sroes
sroes

Reputation: 15053

Why not use floating divs? 

div.row {
    width: 80%;
}

/* clearfix */
div.row { zoom:1; }
div.row:before, div.row:after { content:""; display:table; }
div.row:after { clear:both; }

div.row .column {
    width: 20%;
    float: left;
    text-align: center;
    overflow: hidden;
}

See: http://jsfiddle.net/Y7CrV/8/

But if you want more flexibility, you may want to have a look at http://foundation.zurb.com/grid.php

Upvotes: 0

mara-mfa
mara-mfa

Reputation: 895

add the following to the table css:

table-layout: fixed;

In your case:

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

updated jsfiddle here - http://jsfiddle.net/Y7CrV/7/

Upvotes: 4

khan
khan

Reputation: 29

html{
    width: 100%;
}

table{
    width: 80%;
}
tr{width:100%;}
td{
    display: table-cell;
    width: 20%;
    text-align: center;
    overflow: hidden;
    vertical-align: baseline;
word-break: break-all;
}

img{
    width: 100%;    
}

Upvotes: 1

Related Questions