css 圆形图像 anchor 太大

Question

我目前正在用 php 显示用户个人资料图片，如果他们单击它，就会转到他们自己的个人资料。图像显示正确并且链接有效，但链接的区域超出了图片并超过了附近的链接。我将如何减少 anchor 的面积？

    <?php }    if ($searchuser == $username)
 { ?>
                                    <a href="profile.php">
                                        <?php } ?>

                                            <div style="background-image: url('<?php echo $profilepic; ?> ')" class="user-pic"></div>
                                            <?php if ($searchuser == $username)
 {?>
                                    </a>
div.user-pic {
    margin: 0 auto;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border: 0.09em solid white;
    position: relative;
    top: -60px;
    padding: 0px;
    z-index: -100;
}

Answer 1

试试这个:

PHP

<?php } 
    $show_user_link = false;
    if ($searchuser == $username) { 
        $show_user_link = true;
    }
?>

<div style="background-image: url('<?php echo $profilepic; ?>')" class="user-pic">
    <?php if( $show_user_link ): ?>
        <a class="user-link" href="profile.php">
        </a>
    <?php endif; ?>
</div>

CSS

div.user-pic {
    position: relative;
}

a.user-link {
    height: 125px;
    width: 100%; 
}

您将 anchor 放在 div 标签内，然后您可以使 div 的位置相对且 anchor 的宽度为 100%。

PS:你可以尝试使用类似的东西

<?php if(true): ?>
<strong> some html </strong>
<?php endif; ?>

当混合使用 php 和 html 以使您的代码更具可读性时。

--- 编辑

好的，我明白了，看看新代码现在是否更有帮助，我认为唯一可能出错的是 anchor 的高度，以防它没有固定为 125px，如果您有问题，请告诉我。