1

我正在尝试创建一个动态站点，该站点将在整个页面的各个区域显示指定的个人资料图像。

因此，我希望只有一个文件，并调整它的大小以适应每个区域，就像 Facebook 对其用户组和个人资料图片所做的那样。

在我尝试将图像放入表格之前，我这样做没有问题：

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>

我的 CSS

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

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

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

有什么我想念的吗？图像没有调整大小的任何原因？

谢谢

4

2 回答 2

3

您正在将图像 TD inline 的宽度设置为较小的 px：

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

TD 的宽度会覆盖您为 IMG 声明的宽度。

于 2012-09-05T14:35:37.560 回答
2

见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>
于 2012-09-05T14:45:16.417 回答