如何在 Bulma 中调整图像大小

Bulma 是一个基于 Flexbox 的现代 CSS 框架，它非常适合构建响应式网站和应用程序。在 Bulma 中，调整图像大小非常简单。

使用 image 类

Bulma 提供了 image 类，可以用于调整图像的大小。可以通过以下类来调整图像大小：

• .is-16x16
• .is-24x24
• .is-32x32
• .is-48x48
• .is-64x64
• .is-96x96
• .is-128x128

例如，如果要将图像调整为 64x64 像素，请将其包装在具有 .is-64x64 类的 figure 元素中：

<figure class="image is-64x64">
  <img src="https://picsum.photos/64/64" alt="A random image from Lorem Picsum">
</figure>

自定义大小

如果要自定义图像的大小，可以使用 is-{width}x{height} 类，其中 {width} 和 {height} 是所需的图像宽度和高度。

例如，要将图像调整为 200x100 像素，请使用以下 HTML：

<figure class="image is-200x100">
  <img src="https://picsum.photos/200/100" alt="A random image from Lorem Picsum">
</figure>

结论

此时，你已经知道了如何在 Bulma 中调整图像的大小。如果您对 Bulma 框架的其他方面感兴趣，请阅读 Bulma 文档。