css圆形图像锚太大

Question

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

    <?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%; 
}

你把锚点放在 div 标签中，然后你可以使 div 的相对位置和锚点的宽度为 100%。

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

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

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

--- 编辑

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