引导图像未显示在较小的屏幕上

Question

我的图像在桌面视图中可以正常显示，但在从移动设备浏览时变为 0x0。我似乎无法破解这个原因。该站点正在运行 Bootstrap 4，问题可以在这里看到：https://clonegram.ritvars.lv/profile/demouser

移动端视图

桌面视图

代码

<div class="row">
    <div class="col-3 p-5">
        <img src="{{ $user->profile->profileImage() }}" class="rounded-circle w-100">
    </div>
    <div class="col-9 pt-5">
        <div class="d-flex align-items-center">
            <h1 class="mr-4">{{ $user->username }}</h1>
            ...
        </div>
        ...
    </div>
</div>

Answer 1

那是因为padding: 3rem !important。

您可以通过使用一些min-height 或min-width 并为更大的视口屏幕设置填充来改进它。