如何获取图像以填充容器laravel刀片

xiozqbni 于 2022-11-18 发布在其他

关注(0)|答案(2)|浏览(128)

我正在为我的网站创建一个个人资料页面，并上传个人资料图片。我希望用户上传的图片能填满页面。这样可以确保所有的个人资料图片大小相同，位置也相同

<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>

当前的代码使它看起来像这样（我在容器上放了一个边框，使它更容易看到）

laravel

来源：https://stackoverflow.com/questions/74395496/how-to-get-image-to-fill-container-laravel-blade

2条答案

按热度按时间

42fyovps1#

非常简单。我用了另一个代码，但你可以把它应用到你的代码中
第一个

赞(0）回复(0）举报 2022-11-18

kxe2p93d2#

你是说像这样的东西吗

<div class="d-flex justify-content-center">
    <div class="border border-danger" style="width: 190px;height: 190px;border-radius:70%;">
        @if ($profile_picture != null)
            <img src="{{ $profile_picture }}" style="border-radius:70%;width: 100%;height:auto;">
        @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>

将img宽度设置为100%，而不是主要设置为自动。
您也可以从img中删除border-radius，并在边框div上设置溢出。

赞(0）回复(0）举报 2022-11-18

我来回答

如何获取图像以填充容器laravel刀片

2条答案

相关问题

热门标签

最新问答