bulma将图像缩放到容器

Question

我遵循了文档示例，并将其放在media对象中：

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

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

问题在于，当上传的图像不是正方形（表示比例不是1：1）时，图像会溢出容器，从而有效地破坏了布局。

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

Answer 1

如果为<figure>标签指定“ is-square”类，则可能可以解决您的问题。

它将容器缩放到图像的大小，但是另一方面，由于比例，图像看起来不好。

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