Reputation: 1828
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
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
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