Question

我想为我目前制作的前端制作一张用户卡，我们/我的方法是根据给定的宽度调整用户图像的大小，但我们注意到特别是在大屏幕上，图像变得非常大，而文字仍然很小。

我在 adobe xd 中创建了一个小模型，我如何将它想象成这样： User-Card Mockup

对此的常用方法是什么？我能想象的唯一方法是每 100 或 200 像素进行一次媒体查询，这会很烦人。这不会那么烦人吧？

我们将 Angular 与 SCSS 一起使用，也使用了很多 Bootstrap 4，但有点想摆脱 Bootstrap。

这是我尝试更改组件之前的 HTMl :

<div class="mb-3" style="cursor: pointer;" (click)="openModal(user)">
<div class="row" >

    <div class="col-lg-6 col-sm-6">
        <img class="rounded" width="90%" style="object-fit: cover; overflow: hidden" [src]="user.avatar">
    </div>

    <div class="col-lg-6 col-sm-6 ml-n4 w-100">
        <h3 [title]="user.name" class="text mb-0 border-bottom w-100 trunc">{{ user.name }}</h3>
        <div>
            <h4 class="text mb-0">{{ user.jobTitle }}</h4>
            <h6 class="text mb-0">{{ user.hiredAt | date }}</h6>
            <span class ="badge badge-primary">{{ user.department }}</span>
        </div>
    </div>

</div>

我希望这个问题不是那么愚蠢。

Answer 1

如果您希望图像在响应时上下缩放，请将 CSS 宽度属性设置为 100%，将高度设置为自动 `

    <img class="rounded responsive" width="90%" style="object-fit: cover; overflow: hidden" [src]="user.avatar">
</div>`

.responsive { width: 100%; height: auto; }

根据文本高度动态调整图像大小

1 个答案: