CODEWITHSUNDEEP
htmlcss
Ricky Mason
Ricky Mason

Reputation: 1828

Resize an image using css when its nested in table

Im trying to create a dynamic site that will display a specified profile image throughout the page in various areas.

As such, I'd like to have only one file, and resize it to fit in each area, much like Facebook does with its usergroups and profile pics.

I had no problem doing this until i tried to put the image inside a table:

HTML

<table width='600px'>
    <tr>
        <td rowspan="3" width="75px" height="75px">
            <div id="cp_image" class="hidden rborder">
                <img class="cp_img_resize" src="<?php echo $profile[0]['cp_img_loc'] ?>"/>
            </div>
        </td>
        <td>    
            <strong><?php echo $profile[0]['name'] ?></strong>
        </td>
    </tr>
        <tr>
        <td>            
            <em><?php echo $profile[0]['description']?></em>
        </td>
    </tr>
    <tr>
        <td><?php echo $popular ?></td>
    </tr>
</table>

My CSS

#cp_image {
    width: 100px;
    height: 100px;
}

#cp_name {
    height: 35px;
    min-width: 200px;
}

.cp_img_resize {
    width:100px;
    height: auto;
}

Is there something I'm missing? Any reason the image is not resizing?

Thanks

Upvotes: 1

Views: 7375

Answers (2)

Oriol
Oriol

Reputation: 288710

See http://jsfiddle.net/DmnV7/2/

CSS:

.table{
    width:600px;
}
.cp_img{
    height:75px;
    width:75px;
}

.cp_img>img {
    max-height:75px;
    max-width:75px;
    display:block;
    margin:0 auto;
}

HTML:

<table class="table">
    <tr>
        <td rowspan="3" class="cp_img">
            <img src="[image]" />
        </td>
        <td>    
            <strong>Name</strong>
        </td>
    </tr>
        <tr>
        <td>            
            <em>Description</em>
        </td>
    </tr>
    <tr>
        <td>Popular</td>
    </tr>
</table>

Upvotes: 2

Lowkase
Lowkase

Reputation: 5699

You are setting the width of the image TD inline to a smaller px:

<td rowspan="3" width="75px" height="75px">

The width of the TD is overriding the width you are declaring for the IMG.

Upvotes: 3

Related Questions