将图像缩放至容器

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>