1

ページ全体のさまざまな領域に指定されたプロファイル画像を表示する動的サイトを作成しようとしています。

そのため、Facebook がユーザー グループとプロフィール写真で行うように、ファイルを 1 つだけにして、各領域に収まるようにサイズを変更したいと考えています。

画像をテーブル内に配置しようとするまで、これを行うのに問題はありませんでした：

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 インラインの幅をより小さい 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 に答える