bulma 将图像缩放到容器

Question

我遵循文档示例并将其放在 media 中目的:

<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/128x128.png">
</figure>

我将其用作 card 的一部分用于显示多个元素。

问题是当上传的图像不是平方(意味着比例不是 1:1)时，图像会溢出容器，从而有效地破坏了布局。

有什么办法可以在 bulma 中解决这个问题吗？

Answer 1

我像这样将图像放在 128x128 区域内:

<figure class="is-flex is-align-items-center is-justify-content-center image is-128x128">
  <img src="https://bulma.io/images/placeholders/480x640.png">
</figure>

<figure class="is-flex is-align-items-center is-justify-content-center image is-128x128">
  <img src="https://bulma.io/images/placeholders/640x480.png">
</figure>

然后我添加了这个 css 覆盖:

.image img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}