如何在Laravel Blade中实现图片填充容器

我正在为网站创建个人资料页面，使用用户上传的头像。希望用户上传的图片能够填充容器，以此确保所有头像尺寸一致、位置统一。

当前代码 #

<div class="row d-flex justify-content-center">
    <div class="col-4 align-self-center border border-danger" style="width: 190px ;height: 190px; border-radius:70%;">
        @if ($profile_picture != null)
            <img src="{{ $profile_picture }}" style="border-radius:70% ;width:auto; height:auto; object-fit: fill;">
        @else
            <svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
            </svg>
            <i class="bi bi-person-circle"></i>
        @endif
    </div>
</div>

当前问题 #

当前显示效果中（容器已添加红色边框便于观察），头像未能完全填充圆形容器，存在留白，且不同比例的图片可能出现位置偏移或拉伸变形，无法保证所有头像的尺寸和位置统一。

解决方案 #

要实现头像填充容器且保持比例、位置统一，需要调整容器和图片的样式：

• 容器样式优化：添加overflow: hidden，确保超出容器的图片部分被裁剪；同时border-radius设为50%来实现标准圆形（70%会呈现椭圆效果，这里宽高均为190px，用50%更准确）。
• 图片样式调整：将width和height都设为100%，让图片铺满容器；使用object-fit: cover替代fill，这样图片会保持原有比例，裁剪多余部分来填充容器，避免拉伸变形。
• 默认SVG图标适配：同样设置width: 100%; height: 100%;，确保图标填满容器。

修改后的代码 #

<div class="row d-flex justify-content-center">
    <div class="col-4 align-self-center border border-danger" style="width: 190px; height: 190px; border-radius: 50%; overflow: hidden;">
        @if ($profile_picture != null)
            <img src="{{ $profile_picture }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
        @else
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
            </svg>
        @endif
    </div>
</div>

说明：

• object-fit: cover会让图片按比例缩放，填满容器并裁剪超出部分，保证头像始终居中且填充完整。
• 容器的overflow: hidden配合border-radius: 50%，确保图片不会溢出圆形边界。
• 移除了多余的<i class="bi bi-person-circle"></i>，因为SVG已经能显示默认头像，避免重复渲染。

内容的提问来源于stack exchange，提问作者Jac Phillipps